微信之底欄導航-toBar的實現_mantian

第一步:從阿里圖標庫下載三個圖標,綠色:#08CE6E,灰色:#AAB8B8,下載大小爲64的。並在page目錄下新建一個images目錄在

第二步:在page目錄新建一個test目錄(index,log目錄已存在,無需重建)

test.js

看這個視頻就知道了

看這個視頻就知道了

test.wxml

第三步:app.json的配置中配置路由 

 底部導航欄的配置,在app.json的最下面配置

"tabBar": {

"color": "#a9b7b7",

"selectedColor": "#11cd6e",

"borderStyle": "white",

"list": [

{

"selectedIconPath": "pages/images/index_clicked.png",

"iconPath": "pages/images/index_unclick.png",

"pagePath": "pages/index/index",

"text": "首頁"

},

{

"selectedIconPath": "pages/images/log_clicked.png",

"iconPath": "pages/images/log_unclick.png",

"pagePath": "pages/logs/logs",

"text": "日誌"

},

{

"selectedIconPath": "pages/images/test_clicked.png",

"iconPath": "pages/images/test_unclick.png",

"pagePath": "pages/test/test",

"text": "測試"

}

]

}

 

最後編譯,然後看效果圖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章