效果图
如何实现?
在app.json里面添加,与window:{}同级别
"tabBar": {
"selectedColor": "#d81e06",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-active.png"
},{
"pagePath": "pages/class/class",
"text": "分类",
"iconPath": "/images/fen.png",
"selectedIconPath": "/images/fen-active.png"
},{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/images/cart.png",
"selectedIconPath": "/images/cart-active.png"
},{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my-active.png"
}
]
注意
每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错
各个属性的意思
tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text 导航图标下方文字