以下来源于微信小程序官网
TabBar的属性
![](https://i-blog.csdnimg.cn/blog_migrate/343dc69a6ca9743a48de5729ebaa1b5e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bb93a668099541466f3b141b77e27916.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ec6f48075dc550bb97c8bbafec06193.jpeg)
以下个人制作(*^▽^*)!!!!
TabBar的代码:
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#0096ff",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/homePage/homePage",
"iconPath": "pages/image/grzx.png",
"selectedIconPath": "pages/image/grzx_an.png",
"text": "个人中心"
},
{
"pagePath": "pages/sbgl/sbgl",
"iconPath": "pages/image/sbgl.png",
"selectedIconPath": "pages/image/sbgl_an.png",
"text": "设备管理"
},
{
"pagePath": "pages/message/message",
"iconPath": "pages/image/wdxx.png",
"selectedIconPath": "pages/image/wdxx_an.png",
"text": "我的消息"
},
{
"pagePath": "pages/syzx/syzx",
"iconPath": "pages/image/syzx.png",
"selectedIconPath": "pages/image/syzx_an.png",
"text": "收益中心"
}
]
}
TabBar的效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/bb3cf20637e35f41f41cc83385a73bd8.png)
当你写完TabBar你会发现TabBar用过的链接在使用,页面就无法跳转
![](https://i-blog.csdnimg.cn/blog_migrate/318c98efdb2517f6b611ac435e267910.png)
![](https://i-blog.csdnimg.cn/blog_migrate/51d3eaf1cfbd53779868ac6ec8db6275.png)
这个时候就要用到switchTab
![](https://i-blog.csdnimg.cn/blog_migrate/29c5bead224a38da220013932599e9b7.png)
就可以正常跳转页面了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~