1.tabBar是定义在pages.json文件,小程序底部导航
"tabBar": { "color": "#7A7E83", // tab 上的文字默认颜色 "selectedColor": "#3cc51f", //tab 上的文字选中时的颜色 "borderStyle": "black", //tabbar 上边框的颜色,可选值 black/white,也支持其他颜色值 "backgroundColor": "#ffffff", // 背景色 "list": [{ "pagePath": "pages/index/index", "iconPath": "static/tabbar/index-01.png", //图片路径 "selectedIconPath": "static/tabbar/index.png", //选中图片路径 "text": "首页" }, { "pagePath": "pages/list/list", "iconPath": "static/tabbar/list-01.png", "selectedIconPath": "static/tabbar/list.png", "text": "列表信息" },{ "pagePath": "pages/order/order", "iconPath": "static/tabbar/order-01.png", "selectedIconPath": "static/tabbar/order.png", "text": "订单信息" }, { "pagePath": "pages/mine/mine", "iconPath": "static/tabbar/mine-01.png", "selectedIconPath": "static/tabbar/mine.png", "text": "我的" }] }
tabbar中list导航最少2个,最多5个。
图片大小限制40kb,建议尺寸81px*81px。
2.代码跳转至tabbar页面,需要使用uni.switchTab进行跳转,不能使用uni.navigateTo、uni.redirectTo,使用navigator组件跳转时必须设置open-type="switchTab"
uni.switchTab({ url: '../mine/mine' })
3.tabBar页面链接
<https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar>