详解⼩程序设置底部导航栏⽬⽅法详解⼩程序设置底部导航栏⽬⽅法
⼩程序底部想要有⼀个漂亮的导航栏⽬，不知道怎么制作，于是百度到了本篇⽂章，分享给⼤家。
好了⼩程序的头部标题设置好了，我们来说说底部导航栏是如何实现的。写文章的小程序
我们先来看个效果图
这⾥，我们添加了三个导航图标，因为我们有三个页⾯，⼩程序最多能加5个。
那他们是怎么出现怎么着⾊的呢？两步就搞定！
1. 图标准备
我们进⼊该⽹站，⿏标滑到⼀个喜欢的图标上⾯点击下⽅的下载按钮
在弹出框中选择了俩个不同颜⾊的图标选择64px⼤⼩即可，我选择的是png  然后下载下来起上别名
将上述起好名字的图标保存到⼩程序项⽬⽬录中新创建的 images ⽂件夹中，准备⼯作就做好了
2. 更改配置⽂件
我们到项⽬根⽬录中的配置⽂件 app.json 加⼊如下配置信息
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle":"white",
"list": [{
"selectedIconPath": "images/111.png",
"iconPath": "images/11.png",
"pagePath": "pages/index/index",
"text": "⾸页"
}, {
"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": "开⼼测试"
}]
},
解释⼀下对应的属性信息
tabBar 指底部的导航配置属性
color 未选择时底部导航⽂字的颜⾊
selectedColor 选择时底部导航⽂字的颜⾊
borderStyle 底部导航边框的样⾊（注意这⾥如果没有写⼊样式会导致导航框上边框会出现默认的浅灰⾊线条）
list  导航配置数组
selectedIconPath 选中时图标路径
iconPath 未选择时图标路径
pagePath 页⾯访问地址
text 导航图标下⽅⽂字
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。