一，官网文档地址：
https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
如图:
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，代码：
编辑pages.json
说明：pagePath路径必须真实存在，如果搞错tabbar会不显示
"tabBar": {
"color": "#7A7E83", //字体颜色
"selectedColor": "#007AFF", //选中时字体颜色
"borderStyle": "black", //底部的上边框线条
"backgroundColor": "#F8F8F8", //底部背景色
"fontSize": "12px", //字体大小
"spacing": "5px", //字体到图标的距离
"height": "60px", //底部高
"list": [
{
"pagePath": "pages/list3/list3",
"text": "首页",
"iconPath": "static/tabbar/home.png",//未选中时图片样式
"selectedIconPath": "static/tabbar/homeSel.png"//选中时图片样式
},
{
"pagePath": "pages/swiper/swiper",
"text": "年级",
"iconPath": "static/tabbar/grade.png",
"selectedIconPath": "static/tabbar/gradeSel.png"
},
{
"pagePath": "pages/toast/toast",
"text": "我的",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/mySel.png"
}
]
}
}
三，查看效果
四，查看hbuilderx的版本:
标签：https,18,app,3.6,static,tabbar,com,pages,png From： https://www.cnblogs.com/architectforest/p/17119921.html