微信小程序学习之底部导航栏

首先，我们在app.json中添加4个页面，

"pages": ["pages/index/index","pages/category/category","pages/cart/cart","pages/user/user"],

其次我们把8张图片放到imaes文件夹下，

图标可以去https://www.iconfont.cn/下载

然后添加tabBar项(已经加上注释)：

"tabBar": {// 文字的颜色"color": "#666",// 选中项文字颜色"selectedColor": "#fa2c19",// 导航的栏目"list":[{// 导航页面的地址"pagePath": "pages/index/index",// 导航项的说明文字"text": "首页",// 导航项的默认图片"iconPath": "./images/shouye.png",// 导航项的选中图片"selectedIconPath": "./images/shouye_select.png"},{"pagePath": "pages/category/category","text": "类别","iconPath": "./images/leibie.png","selectedIconPath": "./images/leibie_select.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "./images/gouwuche.png","selectedIconPath": "./images/gouwuche_select.png"},{"pagePath": "pages/user/user","text": "用户","iconPath": "./images/yonghu.png","selectedIconPath":"./images/yonghu_select.png"}]}

保存。

效果图：