微信小程序 底部导航栏目开发
我们先来看个效果图
这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加5个。
那他们是怎么出现怎么着色的呢？两步就搞定！
1. 图标准备
阿里图标库 http://www.iconfont.cn/collections/show/29
我们进入该网站，鼠标滑到一个喜欢的图标上面 点击下方的 下载按钮
在弹出框中 选择了 俩个不同颜色的 图标 选择64px大小即可，我选择的是png 然后下载下来 起上别名
将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了
2. 更改配置文件
我们找到项目根目录中的配置文件 app.json 加入如下配置信息
首页"
},{
"selectedIconPath": "images/221.png","iconPath": "images/22.png","pagePath": "pages/logs/logs","text": "日志"
},{
"selectedIconPath": "images/331.png","iconPath": "images/33.png","pagePath": "pages/test/test","text": "开心测试"
}]
},
解释一下 对应的属性信息
borderStyle底部导航边框的样色（注意这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
list 导航配置数组
selectedIconPath选中时 图标路径
iconPath未选择时 图标路径
pagePath页面访问地址
text导航图标下方文字
如果要改变更详细的样式 请参看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/weapp/43865.html