uni-app 实现根据用户不同角色显示不同的tabBar
微信的tabBar最多5个,所以不能折磨写, 但其他的好像能折磨用(原因是因为这样用可以解决闪烁问题)我的方法原理:相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),下面的就是创建个vuex,放进去了3组数据(因为有3个角色),网上的是真麻烦啊(我也是抄的)!创建组件xiaoz.vue,根据权限(角色)调用不同的数据。在网上大量百度之后,好多都走不通,自己总结了一下
·
在网上大量百度之后,好多都走不通,自己总结了一下!!!
我的方法原理: 相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),
样子都一样的,无非就是数据不一样,千万别想太复杂了
创建 组件 tabBar,
<template>
<view>
<view class="tabBar_css">
<u-tabbar
:value="currentPagePath"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<u-tabbar-item
v-for="(item,index) in tabBerList"
:key="index"
:text="item.text"
:icon="item.iconPath"
:name="item.pagePath"
@click="click_page"
>
</u-tabbar-item>
</u-tabbar>
</view>
</view>
</template>
<script>
import {
mapGetters
} from 'vuex'
export default {
data() {
return {
};
},
props: {
currentPagePath: String,
},
computed: {
...mapGetters(['tabBerList'])
},
methods: {
click_page(arg) {
console.log('arg',arg);
let page = '/' + arg
uni.switchTab({
url: page,
success: function(res) {
console.log(res);
console.log('succcess');
},
fail: function(res) {
console.log('fail');
console.log(res);
}
})
}
}
}
</script>
<style lang="scss">
.tabBar_css {
position: fixed;
bottom: 0;
background-color: red;
z-index: 9999;
width: 100%;
}
</style>
创建组件xiaoz.vue,根据权限(角色)调用不同的数据
<template>
<view class="content">
<view v-if="ccc=='0'">
<u-tabbar
:value="value1"
@change="change1"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item v-for="(item,index) in tabBerList1" ref="div1" :text="item.text" :icon="bbb == index? item.selectedIconPath : item.iconPath" @click="click1(index,item.pagePath)" ></u-tabbar-item>
</u-tabbar>
</view>
<view v-if="ccc=='1'">
<u-tabbar
:value="value1"
@change="change1"
>
<!-- :fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false" -->
<u-tabbar-item v-for="(item,index) in tabBerList0" :text="item.text" :icon="bbb == index? item.selectedIconPath : item.iconPath" @click="click1(index,item.pagePath)" ></u-tabbar-item>
</u-tabbar>
</view>
</view>
<!-- 111 -->
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
// borderTop: false,
// inactiveColor: '#909399',
// activeColor: '#5098FF',
value1:"",
ccc:uni.getStorageSync('id'),
bbb:uni.getStorageSync('xx')
}
},
onShow() {
//隐藏官方的tabBar
},
methods:{
click1(a,b){
// console.log('a',a);
uni.setStorageSync('xx',a)
// console.log('bbb',this.bbb);
uni.switchTab({
url:"/"+b,
})
// if(this.ccc=='0'){
// uni.switchTab({
// url:"/"+b,
// })
// }else{
// uni.redirectTo({
// url:"/"+b,
// })
// }
},
change1(a,b){
// this.bbb=a
// console.log(a,b);
}
},
computed: {
...mapGetters([
'tabBerList0',
'tabBerList1'
// 'midBtn'
])
}
}
</script>
<style scoped lang="scss">
.content{
position: fixed;
bottom: 0rpx;
width:100%
}
</style>
下面的就是创建个vuex,放进去了3组数据(因为有3个角色),网上的是真麻烦啊(我也是抄的)!!!
tabBer.js
import tabBer from '@/untils/tabBar.js'
// tabBar文件为我们创建的tabBer对象数组
// 判断用户tabBer类别
// 0 冻结
// 1 普通用户
// 2 教师
// 3 管理员
// 逻辑判断处理
// let xx=uni.getStorageSync('id')
// let type = xx==='2' ? 'schList' : xx==='1' ? 'tchList' : 'stuList'
// // let type='schList'
// console.log(xx);
// console.log(type);
// midBtn 为设置tabBer中间的凸起,false为不凸起
const state = {
// list: tabBer[type],
list1: tabBer['schList'],
list0: tabBer['stuList'],
data:0
// midBtn: type === 'stuList' ? false : true
}
export default {
namespaced: true,
state
}
getters.js
const getters = {
tabBerList1: state => state.tabBer.list1,
tabBerList0: state => state.tabBer.list0,
data:state=>state.tabBer.data
// midBtn: state => state.tabBer.midBtn
}
export default getters
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tabBer from './modules/tabBer'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
tabBer
},
getters
})
export default store
untils文件 tabBar.js
const stuList = [
{
pagePath:"pages/gysshow/gysshow",
iconPath: "../../static/imgs/tab1.png",
selectedIconPath: "../../static/imgs/tab2.png",
text: "首页",
},
{
pagePath:"pages/xxshow/xxshow",
iconPath: "../../static/imgs/tab3.png",
selectedIconPath: "../../static/imgs/tab4.png",
text: "品类",
},
{
pagePath:"pages/my1/my1",
iconPath: "../../static/imgs/tab5.png",
selectedIconPath: "../../static/imgs/tab6.png",
text: "我的",
}
];
const schList = [
{
pagePath:"pages/index/index",
iconPath: "../../static/imgs/tab1.png",
selectedIconPath: "../../static/imgs/tab2.png",
text: "首页",
},
{
pagePath:"pages/health/health",
iconPath: "../../static/imgs/tab3.png",
selectedIconPath: "../../static/imgs/tab4.png",
text: "品类",
},
{
pagePath:"pages/my/my",
iconPath: "../../static/imgs/tab5.png",
selectedIconPath: "../../static/imgs/tab6.png",
text: "我的",
}
];
export default {
stuList,
schList
};
pages.json 里面tabBar 配置
微信的tabBar最多5个,所以不能折磨写, 但其他的好像能折磨用(原因是因为这样用可以解决闪烁问题)
onShow: function() {
// console.log(this)
uni.hideTabBar()
},
切换tabBar时,需要把这个隐藏了,不然会报错
更多推荐
已为社区贡献10条内容
所有评论(0)