bengca
我就是个大白菜
采纳率50%
2021-01-26 10:56

uniapp怎么根据登录用户的角色不同动态改变tabbar内容

uniapp怎么根据登录用户的角色不同动态改变tabbar内容,两种角色,一种是管理员,tabbar需要显示四个,一类是普通用户,tabbar显示两个就可以,哪位大佬有思路或者经验传授一下,感激不尽!!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • bengca 我就是个大白菜 12天前

    我之前贴出的地址有bug,切换用户角色登录时,tabbar不会自己发生改变,需要手动刷新,下面是我在之前代码的基础上进行修改的部分

    有些名称我改了,大家写的时候注意下自己定义的名称

    1、修改store/modules/tabbar.js

    import tabBar from '../../untils/tabBar.js'
    
    const tabBer = {
    	state: {
    		role: '',
    		tabBarList: []
    	},
    
    	// mutations改变state里的数据
    	mutations: {
    		setRole(state,role){
    			state.role = role			
    			var i = state.role === 'null' ? 'admin' : 'ordinary'
    			state.tabBarList = tabBar[i]
    		},
    	}
    }
    
    export default tabBer

    2、修改getters.js (此项就是改了一下名称,没啥太大变动)

    const getters = {
        tabBarList: state => state.tabBer.tabBarList,
        role: state => state.tabBer.role
    };
    
    export default getters

    3、页面登录成功后    存储用户身份,调用vuex方法进行判断

    uni.setStorageSync('baseId', baseId)
    this.$store.commit('setRole', baseId)
    
    // 如果是另外一种角色
    uni.setStorageSync('baseId', 'null')
    this.$store.commit('setRole', 'null')

    baseId为需要用来判断的用户角色

     

    4、APP.vue解决vuex刷新数据丢失问题

    <script>
    	import{mapState, mapMutations} from 'vuex'
    	export default {
    		onLaunch: function() {
    			let role = uni.getStorageSync('baseId') // 判断用户是否已登录
    			if(role) {
    				this.setRole(role)
    			}
    			console.log('App Launch')
    		},
    		onShow: function() {
    			console.log('App Show')
    		},
    		onHide: function() {
    			console.log('App Hide')
    		},
    		methods: {
    			...mapMutations(['setRole'])
    		}
    	}
    </script>
    点赞 评论 复制链接分享
  • bengca 我就是个大白菜 3月前

    官网中的 uni.setTabBarItem 只是动态改变 tabBar 某一项的内容,不能改变数量,引用了一下uView组件库完美解决了问题

    点赞 评论 复制链接分享
  • bengca 我就是个大白菜 3月前

    问题已解决

    点赞 评论 复制链接分享
  • zhshchilss zhshchilss 3月前
    点赞 评论 复制链接分享
  • qq_36772452 qq_36772452 1月前

    能否给点代码提示呢?

    点赞 评论 复制链接分享

为你推荐