微信小程序--TabBar不(bù)出(chū)現
發表時(shí)間:2021-3-31
發布人(rén):融晨科技
浏覽次數:42
今天打算開始實戰一個(gè)微信小程序項目,一開始就(jiù)踩坑了(le/liǎo),正确設置了(le/liǎo)TabBar,但是(shì)TabBar就(jiù)是(shì)不(bù)能顯示出(chū)來(lái),後面才找到(dào)原因,這(zhè)裏記錄下:
app.json正确代碼:
{
"pages":[
"pages/index/index",
"pages/leader/leader",
"pages/leader/stories/stories",
"pages/leader/authors/authors",
"pages/stack/stack",
"pages/stack/booklist/booklist",
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",
"pages/mine/mine",
"pages/mine/news/news",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "網易蝸牛讀書",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
{
"pagePath":"pages/leader/leader",
"iconPath": "assets/icons/lingdu.png",
"selectedIconPath": "assets/icons/lingdu_sel.png",
"text":"領讀"
},
{
"pagePath":"pages/stack/stack",
"iconPath": "assets/icons/stack.png",
"selectedIconPath": "assets/icons/stack_sel.png",
"text":"分類"
},
{
"pagePath": "pages/bookdesk/bookdesk",
"iconPath": "assets/icons/bookdesk.png",
"selectedIconPath": "assets/icons/bookdesk_sel.png",
"text":"書桌"
},
{
"pagePath":"pages/mine/mine",
"iconPath": "assets/icons/mine.png",
"selectedIconPath": "assets/icons/mine_sel.png",
"text":"我的(de)"
}
]
}
}
這(zhè)裏注意顯示解決有兩種方式:
1.pages裏的(de)首個(gè)頁面必須在(zài)list數組裏有配置,所以(yǐ)在(zài)lists數組裏加一個(gè)字典對象即可。
{
"pagePath":"pages/index/index",
"iconPath": "assets/icons/index.png",
"selectedIconPath": "assets/icons/index_sel.png",
"text":"首頁"
}
但是(shì)我的(de)TabBar又不(bù)想有這(zhè)個(gè)item顯示,這(zhè)裏看第二種解決辦法。
2.pages數組的(de)第一項必須是(shì)tabBar的(de)list數組的(de)一員:
這(zhè)裏有個(gè)疑惑:
百度了(le/liǎo)解決方法,顯示将list數組加了(le/liǎo)index的(de)模塊item,後面不(bù)想要(yào / yāo)index模塊在(zài)TabBar顯示,然後又删除再運行,問題就(jiù)解決了(le/liǎo),也(yě)沒有設置pages數組的(de)第一項必須是(shì)tabBar的(de)list數組的(de)一員。
解決了(le/liǎo)就(jiù)好,知道(dào)的(de)大(dà)神可以(yǐ)留言告訴我喲!