uniapp 使用自定义底部导航来动态渲染tabbar导航

使用uniapp 实现动态渲染tabbar导航。可以有效的根据用户的角色来动态渲染tabbar菜单。

创建tabbar路由

修改pages.json , 配置tabbar需要用到的路由,创建4个tabbar路由

{
pages:[
    {
        "path": "pages/index/index",
        "style": {
        "navigationStyle": "custom",
        "app-plus":{
        "bounce":"none"
        }
        }
     },
     {
         "path": "pages/cate/index",
         "style": {
         "navigationStyle": "custom",
         "app-plus":{
         "bounce":"none"
         }
         }
     },
     {
            "path": "pages/list/index",
            "style": {
                "navigationStyle": "custom",
                "app-plus":{
                    "bounce":"none"
                }
            }
    },
    {
            "path": "pages/my/index",
            "style": {
                "navigationStyle": "custom",
                "app-plus":{
                    "bounce":"none"
                }
            }
    },
]
}

保存tabbar 菜单配置

使用store状态管理库来保存菜单配置。

const store = {
    state:{
        index:0,
        list:[
            {	
                text:'首页',
                active_icon:require('@/static/imgs/tabbar/1_active.png'),
                default_icon:require('@/static/imgs/tabbar/1.png'),
                url:'pages/index/index'
            },
            {	
                text:'分类',
                active_icon:require('@/static/imgs/tabbar/2_active.png'),
                default_icon:require('@/static/imgs/tabbar/2.png'),
                url:'pages/cate/index'
            },
            {	
                text:'购物车',
                active_icon:require('@/static/imgs/tabbar/3_active.png'),
                default_icon:require('@/static/imgs/tabbar/3.png'),
                url:'pages/list/index'
            },
            {	
                text:'我的',
                active_icon:require('@/static/imgs/tabbar/4_active.png'),
                default_icon:require('@/static/imgs/tabbar/4.png'),
                url:'pages/my/index'
            },
        ]
    },
    mutations:{
        changeTabbarMutations(state ,payload){
            state.index = payload
            uni.redirectTo({
                url:state.list[payload].url
            })
        }
    }
}

在store设置一个changeTabbarMutations跳转方法。点击tabbar菜单时，调用该方法。

渲染tabbar菜单

我使用了提供好了的uviewui的tabbar自定义底部菜单的这个组件来渲染。

<u-tabbar
            :value="$store.state.index"
            @change="value=>$store.commit('changeTabbarMutations',value)"
            :fixed="true"
            :placeholder="true"
            :safeAreaInsetBottom="true"
        >
            <u-tabbar-item :text="item.text" v-for="item,index in $store.state.list" :key="index">
                <image
                    slot="active-icon"
                    :src="item.active_icon"
                    style="width: 36rpx;height: 36rpx;"
                ></image>
                <image
                    slot="inactive-icon"
                    :src="item.default_icon"
                    style="width: 36rpx;height: 36rpx;"
                ></image>
            </u-tabbar-item>
        </u-tabbar>

将上面这个渲染好的tabbar菜单放置需要的页面上即可。自定义菜单的功能就完成了。

根据角色来动态渲染tabbar菜单

思路：首先获取用户的角色，然后根据用户的角色来动态的设置state.list的值。

//在登录页面获取用户角色之后，遍历渲染tabbar菜单
uni.request({
    url: 'https://www.example.com/request', 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        //返回一个tabbar角色权限 ,直接赋值
        this.$store.state.list = res.data
    }
});

实现方式比较多，大的方向就是由客户端还是服务端来控制tabbar。