参考官网：https://uniapp.dcloud.io/collocation/pages.html

1. 创建底部导航栏

1. 新建导航页面
   选中文件区 pages 文件夹，右键 –> 新建页面 –> 输入 文件名，回车

1. 在 pages 中，生成对应文件和默认模板
2. 在 pages.json的 pages 中，生成新页面的默认配置代码

2. 配置底部导航栏结构
   在 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. 手动设置底部导航栏

1. 设置和移除 tab 徽标

// 设置徽标
uni.setTabBarBadge({
    index: 1, // 索引，从 0 开始，指定第几个 tabBar
    text:  1  // 徽标中显示的文本
})

// 移除徽标
uni.removeTabBarBadge({
    index: 1
})

2. 设置和移除 红点

// 设置红点
uni.showTabBarRedDot({
    index: 1 // 索引，从 0 开始，指定第几个 tabBar
})

// 移除红点
uni.hideTabBarRedDot({
    index: 1 // 索引，从 0 开始，指定第几个 tabBar
})

3. 显示和隐藏 tabBar

// 显示 tabBar
uni.showTabBar()

// 隐藏 tabBar
uni.hideTabBar()

4. 设置 tabBar 的，文本颜色，背景色，上边框颜色

uni.setTabBarStyle({
    color:  #FFF ,
    selectedColor:  #007AFF ,
    backgroundColor:  #000000 ,
    borderStyle:  black 
})

5. 设置 tabBar 的文本内容和图片路径

uni.setTabBarItem({
    index: 1, // 索引，从 0 开始，指定第几个 tabBar
    text:  接口 , // 修改后的文本
    iconPath:  /static/api.png ,
    selectedIconPath:  /static/apiHL.png 
})