uniapp如何控制底部导航栏的显示隐藏

配置底部导航栏结构
在 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
})

猜你喜欢

转载自blog.csdn.net/weixin_44948981/article/details/128936557
今日推荐