配置底部导航栏结构
在 pages.json 中,配置 tabBar
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/mine/index",
"style" :
{
"navigationBarTitleText": "我的"
}
}
],
"tabBar": {
"color": "#7A7E83", // tab 上的文字默认颜色
"selectedColor": "#3cc51f", // tab 上的文字选中时的颜色
"borderStyle": "black", // tabbar 上边框的颜色,可选值 black/white
"backgroundColor": "#ffffff", // tab 的背景色
"list": [{ // 最少2个、最多5个 tab
"pagePath": "pages/home/index",
"iconPath": "static/img/home.png",
"selectedIconPath": "static/img/home-active.png",
"text": "首页"
}, {
"pagePath": "pages/mine/index",
"iconPath": "static/img/mine.png",
"selectedIconPath": "static/img/my-active.png",
"text": "我的"
}]
}
手动设置底部导航栏
显示和隐藏 tabBar
// 显示 tabBar uni.showTabBar() // 隐藏 tabBar uni.hideTabBar()
设置右上角徽标
// 设置徽标 uni.setTabBarBadge({ index: 1, // 索引 text: '1' // 徽标中显示的文本 }) // 移除徽标 uni.removeTabBarBadge({ index: 1 })