微信之底栏导航-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": "测试"

}

]

}

 

最后编译,然后看效果图。