The uniapp applet dynamically generates tabbars based on permissions
- introduction
- Encapsulate tabbar component
-
- 1. Define components in the components directory
- 2. Define tabbar data based on permissions
- 3. Get the role’s tabbar data in vuex
- 4. When the interface returns role identity or permission data, set the tabBarList of vuex
- 5.Introduce components into all required pages
- 6. Add operations in App.vue
- 7. Add tabbar data to pages.json
introduction
When developing small programs, some projects will encounter situations where tabbars need to be dynamically generated based on role permissions. Therefore, developers need to define tabbar components themselves. The number of tabbars should not exceed 5.
Encapsulate tabbar component
1. Define components in the components directory
<template>
<view class="uni-tabbar">
<view class="uni-tabbar-item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
<view class="uni-tabbar-bd">
<view class="uni-tabbar-icon">
<image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="validateHttp(item.selectedIconPath)" />
<image v-else class="icon-img" mode="aspectFit" :src="validateHttp(item.iconPath)" />
</view>
</view>
<view class="uni-tabbar-label" :class="{ active: item.pagePath === pagePath }">{
{ item.text }}</view>
</view>
</view>
</template>
<script>
import {
mapGetters } from 'vuex';
import {
isHttpOrHttps } from '@/utils/replace.js';
export default {
props: {
// 当前页面路径
pagePath: {
type: String,
required: true
},
// tabbar 底部导航栏数据
tabbar: {
type: Array,
required: true
}
},
computed: {
...mapGetters(['tabBarList'])
},
// watch: {
// pagePath: {
// handler(val) {
// // console.log('pagePath监听===val', val);
// },
// immediate: true
// }
// },
methods: {
// 检验拼接url地址
validateHttp(url) {
return isHttpOrHttps(url);
},
changeTab(item) {
this.page = item.pagePath;
uni.switchTab({
url: this.page });
this.$emit('onTabTap');
}
}
};
</script>
<style lang="scss" scoped>
.uni-tabbar {
position: fixed;
bottom: 0;
z-index: 50;
width: 100%;
display: flex;
justify-content: space-around;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
border-top: solid 1rpx #dddddd;
background-color: #fff;
.uni-tabbar-item {
width: 25%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.uni-tabbar-icon {
height: 64rpx;
}
.icon {
display: inline-block;
}
.uni-tabbar-label {
line-height: 24rpx;
font-size: $font-size-sm;
color: $color;
&.active {
font-weight: 600;
}
}
.icon-img {
width: 64rpx;
height: 64rpx;
}
}
</style>
2. Define tabbar data based on permissions
let BUYER = [
{
text: "推荐",
pagePath: '/pages/common/recommend/index',
iconPath: "wxapp-img/icon/ic_tuijian.png",
selectedIconPath: "wxapp-img/icon/ic_tuijian_n.png",
},
{
text: "关注",
pagePath: '/pages/common/brandFollow/index',
iconPath: "wxapp-img/icon/ic_guanuzhu.png",
selectedIconPath: "wxapp-img/icon/ic_guajnzhu_n.png",
},
{
text: "订单",
pagePath: '/pages/buyer/order/index',
iconPath: "wxapp-img/icon/ic_dingdan.png",
selectedIconPath: "wxapp-img/icon/ic_dingdan_n.png",
},
{
text: "我的",
pagePath: '/pages/common/mine/index',
iconPath: "wxapp-img/icon/ic_wode.png",
selectedIconPath: "wxapp-img/icon/ic_wode_n.png",
},
]
let SHOP_MANAGER = [
{
text: "推荐",
pagePath: '/pages/common/recommend/index',
iconPath: "wxapp-img/icon/ic_tuijian.png",
selectedIconPath: "wxapp-img/icon/ic_tuijian_n.png",
},
{
text: "关注",
pagePath: '/pages/common/brandFollow/index',
iconPath: "wxapp-img/icon/ic_guanuzhu.png",
selectedIconPath: "wxapp-img/icon/ic_guajnzhu_n.png",
},
{
text: "采购车",
pagePath: '/pages/manager/car/index',
iconPath: "wxapp-img/icon/ic_caigouche.png",
selectedIconPath: "wxapp-img/icon/ic_caigoouche_n.png",
},
{
text: "我的",
pagePath: '/pages/common/mine/index',
iconPath: "wxapp-img/icon/ic_wode.png",
selectedIconPath: "wxapp-img/icon/ic_wode_n.png",
},
]
export default {
BUYER,
SHOP_MANAGER
}
3. Get the role’s tabbar data in vuex
// modules/tabBar.js
import tabbar from '@/utils/tabbar.js'
const tabBar = {
state: {
role: '',
tabBarList: [],
},
mutations: {
setRole(state, role) {
state.role = role;
state.tabBarList = tabbar[role];
}
},
}
export default tabBar
// getters.js
const getters = {
tabBarList: state => state.tabBar.tabBarList,
role: state => state.tabBar.role
}
export default getters
// index.js
import Vue from 'vue';
import Vuex from 'vuex';
import tabBar from './modules/tabBar.js'
import getters from './getters.js'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
tabBar
},
getters
})
export default store;
4. When the interface returns role identity or permission data, set the tabBarList of vuex
5.Introduce components into all required pages
...
<tab-bar :tabbar="tabBarList" :pagePath="routerPath"/>
...
<script>
import {
mapGetters } from 'vuex';
import TabBar from '@/components/TabBar/index.vue';
export default {
data() {
return {
// 获取当前页面路径
routerPath: '/' + this.$mp.page.route,
};
},
computed: {
...mapGetters(['tabBarList'])
},
components: {
TabBar
},
onShow() {
// 隐藏原生tabbar
uni.hideTabBar({
});
},
}
</script>
6. Add operations in App.vue
onShow() {
// 隐藏原生tabbar
uni.hideTabBar({
});
},
7. Add tabbar data to pages.json
// 根据权限路径去重，把所有的 tabbar 路径添加进去，记得不得超过5个
"tabBar": {
"list": [{
"pagePath": "pages/common/recommend/index"
},
{
"pagePath": "pages/common/brandFollow/index"
},
{
"pagePath": "pages/buyer/order/index"
},
{
"pagePath": "pages/common/mine/index"
},
{
"pagePath": "pages/manager/car/index"
}
]
},
This method was also modified through online information search and the situation of my project itself. If there are any errors, you are welcome to point them out!
Finally, remember that the tabBar data in pages.json cannot exceed 5. If it must exceed 5, it needs to be completely customized. If the page to be jumped is a tabbar page, you can only use the uni.reLaunch() method, and no need Then configure the tabBar path in pages.json! ! !