【⼩程序】uview-ui（uni-app）+⼩程序根据权限动态的更改底部tabbar 背景
公司要求开发⼀个⼩程序，要求三种不同权限的⼈都可以使⽤，使⽤时根据不同的权限，获取不同的tabbar，以及展⽰不同的内容。
思路
⼀开始考虑的是⼩程序本⾝的动态设置tabbar⽅法wx.setTabBarItem，之后百度发现，使⽤这个⽅法刷新切换时会短暂⽩屏，再之后才考虑了使⽤uview-ui的Tabbar底部导航栏组件。当然，主要功能是百度上寻的其他⼈的代码，⾃⼰再润⾊了⼀番。
最终选择了uni-app的uview-ui（UI框架）+vuex来完成这个功能。其中，vuex主要是⽤来存储当前的tabbar内容的。
第⼀步
在utils⽂件夹下新建⼀个tabbar.js，来存储不同权限下的底部导航数据。
text:"⾸页",
pagePath:'/pages/index/index',
iconPath:"/static/tabbar/index.png",
selectedIconPath:"/static/tabbar/index_selected.png",
},
{
text:"订单",
pagePath:'/pages/order/order',
iconPath:"/static/tabbar/order.png",
selectedIconPath:"/static/tabbar/order_selected.png",
},
{
text:"我的",
pagePath:'/pages/mine/mine',
iconPath:"/static/tabbar/mine.png",
selectedIconPath:"/static/tabbar/mine_selected.png",
}
]
let tab2 =[{
text:"⾸页",
pagePath:'/pages/index/index',
iconPath:"/static/tabbar/index.png",
selectedIconPath:"/static/tabbar/index_selected.png",
},
{
text:"培训",
pagePath:'/pages/train/train',
iconPath:"/static/tabbar/train.png",
selectedIconPath:"/static/tabbar/train_selected.png",
},
{
text:"订单",
pagePath:'/pages/order/order',
iconPath:"/static/tabbar/order.png",
selectedIconPath:"/static/tabbar/order_selected.png",
},
{
selectediconpath什么意思
text:"个⼈中⼼",
pagePath:'/pages/mine/mine',
iconPath:"/static/tabbar/mine.png",
selectedIconPath:"/static/tabbar/mine_selected.png",
}
]
export default{
tab1,
tab2
}
我这⾥有两种不同的权限，第⼆种权限⽐第⼀种权限多了⼀条。第⼆步
在page.json⽂件⾥，把tabbar⾥的⼏个页⾯去重放进去。
"list":[{
"pagePath":"pages/index/index"
},
{
"pagePath":"pages/mine/mine"
},
{
"pagePath":"pages/order/order"
},
{
"pagePath":"pages/train/train"
}
]
}
只是单纯的写个路径，什么都不要添加。
第三步
uniapp是可以直接使⽤vuex的，所以，直接在项⽬的根⽬录下新建⼀个store⽂件夹，存储相关数据。
tabBer.js
import tabBar from'../../utils/tabbar.js'//引⼊tabbar⽂件。
let role = StorageSync('role')//把登录后的
const tabBer ={
state:{
role:'',
tabBarList:[],
},
mutations:{
setRole(state,role){
/
/先得到权限，再根据权限设置tabbarList
state.tabBarList = tabBar[role];
}
},
}
export default tabBer
getters.js
const getters ={
tabBarList: state => state.tabBer.tabBarList,
role:state=>le
}
export default getters
index.js
import Vue from'vue';
import Vuex from'vuex';
import tabBer from'./modules/tabBer.js'
import getters from'./getters.js'
Vue.use(Vuex);
const store =new Vuex.Store({
modules:{
tabBer
},
getters
})
export default store;
在⼊⼝⽂件main.js中使⽤
import Vue from'vue'
import App from'./App'
import uView from"uview-ui";
import store from'./store/index'
Vue.use(uView);
Vue.prototype.$store = store
App.mpType ='app'
const app =new Vue({
...App,
store
})
app.$mount()
存储⾄vuex⼤概就是这些了，然后就是登录获取权限，渲染在页⾯上。渲染
在需要的页⾯上，使⽤tabBar组件。
<template>
<view>
<u-tabbar :list="tabBarList":active-color="activeColor":inactive-color="inactiveColor"
:
border-top="borderTop"></u-tabbar>
</view>
</template>
<script>
import{
mapGetters
}from'vuex'
export default{
data(){
return{
borderTop:false,
inactiveColor:'#909399',
activeColor:'#FF5370'
}
},
computed:{
...mapGetters([
'tabBarList',
'role'
])
},
}
</script>
<style lang="scss">
</style>
登录时，获取返回的权限，然后再调⽤setRole⽅法
<script>
import{
mapState,
mapMutations
}from'vuex';
export default{
data(){
return{
form:{},
show:false,
};
},
methods:{
//登录
login(){
let form =this.form;
uni.setStorageSync('role', pe);//存⼊权限
this.pe);//设置tabbar
uni.switchTab({
url:'../index/index'//然后跳转到登录后的⾸页
})
}
}
}
</script>
这⾥要注意⼀下，vuex刷新后可能就没有数据了，所以需要在app.vue中在取出来⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。