微信小程序动态tabBar

时间:2021-03-13

如果需要根据用户的类型显示不同的tabBar,则需要使用 自定义 tabBar。

链接:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

使用方法

复制微信官方给的示例中的custom-tab-bar文件夹到自己的小程序根目录下

修改 custom-tab-bar/index.js 中的代码

你可以在attached方法中根据不同的用户设置不同的tabbar。

Component({
    data: {
        selected: 0,
        color: "#8C8C8C",
        selectedColor: "#FF5757",
        list: []
    },
    attached() {
        let x1= {
            "text": "x1",
            "pagePath": "/pages/index/x1",
            "iconPath": "/images/icon_tabbar_home.png",
            "selectedIconPath": "/images/icon_tabbar_home_on.png"
        };
        let x2= {
            "text": "x2",
            "pagePath": "/pages/search/x2",
            "iconPath": "/images/icon_tabbar_search.png",
            "selectedIconPath": "/images/icon_tabbar_search_on.png"
        };    
   
        let list = [x1,x2];
        // 根据不同的条件,设定不同的值
        this.setData({
            list: list
        });
    },
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.path
            wx.switchTab({url})
            this.setData({
                selected: data.index
            })
        }
    }
})

注意:所有在上面使用的页面都需要在app.json文件中定义,同时要在tabbar中的list中定义。