在微信小程序中,tabBar最多设置5个tab标签,最少设置2个标签,分为底部tabBar,顶部tabBar,在渲染顶部tabBar时,不显示图标;
tabBar的6个组成部分
1、backgroundColor:tabBar的背景色
2、selectedIconPath:选中时的图片路径
3、borderStyle:tabBar上边框的颜色
4、iconPath:未选中时的图片路径
5、selectedColor:tab上的文字选中时的颜色
6、color:tab上文字的默认(未选中)颜色
如何配置tabBar:
在app.json中,与Windows节点平级,加上tabBar节点,里面包含list集合,集合中包含pagePath和text,其中pagePath代表点击tab页时显示的页面,直接在Pages节点中复制粘贴即可,text代表tab页的文字
在app.json中
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/修改密码.png",
"selectedIconPath": "/images/选择角色.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/样式.png",
"selectedIconPath": "/images/样式设置.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/firsttab.png",
"selectedIconPath": "/images/firsttab-active.png"
}
]
},
新建三个页面home,message,contact,运行效果如下