1. 程式人生 > >微信小程式開發踩坑之tabbar

微信小程式開發踩坑之tabbar

學習微信小程式中,遇到底部的TabBar不出現的問題。錯誤現象是,專案的app.json使用以下程式碼,卻沒有出現TabBar。 { "pages":[ "pages/clickDemo/clickDemo", "pages/logs/logs", "pages/index/index", "pages/mypage/mypage" ], "window": { "backgroundTextStyle": "dark ", "navigationBarBackgroundColor": "#ddd", "navigationBarTitleText": "Tabbar Demo", "navigationBarTextStyle": "black", "backgroundColor": "#ff0000" }, "tabBar": { "color": "#000000", "borderStyle": "#000", "selectedColor": "#9999FF", "list": [ { "pagePath": "pages/index/index", "text": "首頁", "iconPath": "image/location_normal.png", "selectedIconPath": "image/location_selected.png" }, { "pagePath": "pages/logs/logs", "text": "設定", "iconPath": "image/setting_normal.png", "selectedIconPath": "image/setting_selecred.png" } ] } } 底部沒有出現TabBar,為什麼底部不出現TabBar?原因在於,app.json頭部的pages陣列的第一項"pages/clickDemo/clickDemo"沒有成為tabBar的一員,也就是在tabBar的list陣列內沒有連結clickDemo頁面的條目。解決方案:一,我們在list陣列內加入連結clickDemo頁面的條目。二,把pages陣列的第一項設定為"pages/index/index",或者設定為"pages/logs/logs"。也就是說,pages陣列的第一項必須是tabBar的list陣列的一員。