参考官网：https://uniapp.dcloud.io/collocation/pages.html
1. 创建底部导航栏
- 新建导航页面
选中文件区 pages 文件夹，右键 --> 新建页面 --> 输入 文件名，回车
1. 在 pages 中，生成对应文件和默认模板
2. 在 pages.json的 pages 中，生成新页面的默认配置代码
- 配置底部导航栏结构
在 pages.json 中，配置 tabBar
注意：pages 的第一个 path 必须与 tabBar 的第一个 pagePath 相同否则不显示底部导航
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText": "我的"
}
}
],
"tabBar": {
"color": "#7A7E83", // tab 上的文字默认颜色
"selectedColor": "#3cc51f", // tab 上的文字选中时的颜色
"borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
"backgroundColor": "#ffffff", // tab 的背景色
"list": [{ // 最少2个、最多5个 tab
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
"iconPath": "static/tabbar/home.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
"selectedIconPath": "static/tabbar/home-active.png", // 选中时的图片路径
"text": "首页" // tab 上按钮文字
}, {
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-active.png",
"text": "我的"
}]
}
参考官网：https://uniapp.dcloud.io/collocation/pages.html
2. 手动设置底部导航栏
- 设置和移除 tab 徽标
// 设置徽标
uni.setTabBarBadge({
index: 1, // 索引，从 0 开始，指定第几个 tabBar
text: '1' // 徽标中显示的文本
})
// 移除徽标
uni.removeTabBarBadge({
index: 1
})
- 设置和移除 红点
// 设置红点
uni.showTabBarRedDot({
index: 1 // 索引，从 0 开始，指定第几个 tabBar
})
// 移除红点
uni.hideTabBarRedDot({
index: 1 // 索引，从 0 开始，指定第几个 tabBar
})
- 显示和隐藏 tabBar
// 显示 tabBar
uni.showTabBar()
// 隐藏 tabBar
uni.hideTabBar()
- 设置 tabBar 的，文本颜色，背景色，上边框颜色
uni.setTabBarStyle({
color: '#FFF',
selectedColor: '#007AFF',
backgroundColor: '#000000',
borderStyle: 'black'
})
- 设置 tabBar 的文本内容和图片路径
uni.setTabBarItem({
index: 1, // 索引，从 0 开始，指定第几个 tabBar
text: '接口', // 修改后的文本
iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png'
})
