Uniapp根据权限（角色）不同动态展示底部tabbar-Toy模板网

这篇具有很好参考价值的文章主要介绍了Uniapp根据权限（角色）不同动态展示底部tabbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

比如绑定openId展示的tabbar为：首页、巡检、工单

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

未绑定openId展示的tabbar为：在线报修、我的报修

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

首页配置pages.json中的tabbar：

这里只用配置pagePath就可以了~

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

具体代码如下：文章来源地址https://www.toymoban.com/news/detail-858172.html

 "tabBar": {
    "custom": true,
    "color": "#bfbfbf",
    "selectedColor": "#226be4", // 选中tab栏文本颜色
    "list": [{
        "pagePath": "pages/home/home"
        // "text": "首页",
        // "iconPath": "static/shouye.png",
        // "selectedIconPath": "static/shouye(1).png"
      },
      {
        "pagePath": "pages/plan/plan"
        // "text": "巡检",
        // "iconPath": "static/xunjian.png",
        // "selectedIconPath": "static/xunjian (1).png"
      },
      {
        "pagePath": "pages/tickets/tickets"
        // "text": "工单",
        // "iconPath": "static/tickets.png",
        // "selectedIconPath": "static/tickets(1).png"
      },
      {
        "pagePath": "pages/onlrepairs/onlrepairs"
        // "text": "在线报修",
        // "iconPath": "static/onlrepair.png",
        // "selectedIconPath": "static/onlrepair(1).png"
      },
      {
        "pagePath": "pages/my/my"
        // "text": "我的报修",
        // "iconPath": "static/baoxiu.png",
        // "selectedIconPath": "static/baoxiu (1).png"
      }
    ]
  }

创建一个自定义的tabbar文件：

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

具体代码如下：

注意：pagePath的最前面要加 /

// 未绑定openId展示的页面
const publicBar = [{
    "pagePath": "/pages/onlrepairs/onlrepairs",
    "text": "在线报修",
    "iconPath": "/static/onlrepair.png",
    "selectedIconPath": "/static/onlrepair(1).png"
  },
  {
    "pagePath": "/pages/my/my",
    "text": "我的报修",
    "iconPath": "/static/baoxiu.png",
    "selectedIconPath": "/static/baoxiu (1).png"
  }
]

// 绑定openId展示的页面
const selfBar = [{
    "pagePath": "/pages/home/home",
    "text": "首页",
    "iconPath": "/static/shouye.png",
    "selectedIconPath": "/static/shouye(1).png"
  },
  {
    "pagePath": "/pages/plan/plan",
    "text": "巡检",
    "iconPath": "/static/xunjian.png",
    "selectedIconPath": "/static/xunjian (1).png"
  },
  {
    "pagePath": "/pages/tickets/tickets",
    "text": "工单",
    "iconPath": "/static/tickets.png",
    "selectedIconPath": "/static/tickets(1).png"
  }
]

export {
  publicBar,
  selfBar
}

创建index.js文件配置vuex ：

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

具体代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		dynamicTabbar: [] // 动态tabbar
	},
	getters: {},
	actions: {
		changeTabbar({commit}, payload) {
			commit('updateTabbar', payload)
		}
	},
	mutations: {
		updateTabbar(state, payload) {
			state.dynamicTabbar = payload
		}
	}
})

export default store

Vuex简易了解：

state：统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
mutations ：使用它来修改数据(类似于methods)更改state中的数据必须使用mutations来进行更改
getters：类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
actions：发起异步请求
modules：模块拆分

在main.js中引入并挂载store：

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

在Login页面引入自定义tabbar页面并判断：

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

最后在每个页面使用动态的tabbar：

springboot uniapp 动态权限导航栏显示,uni-app,微信小程序

具体代码如下：

 <!-- 动态渲染tabBar -->
    <u-tabbar v-model="current" :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
      :border-top="borderTop" />

  data() {
      return {
         title: '首页',
         tabBarList: this.$store.state.dynamicTabbar,
         current: 0,
         borderTop: true,
         inactiveColor: '#909399',
         activeColor: '#5098FF',
      }
  }

到了这里，关于Uniapp根据权限（角色）不同动态展示底部tabbar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！