uni-app使用uview-ui实现动态更改底部tabbar-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app使用uview-ui实现动态更改底部tabbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：根据不同的权限（用户 0，物业 1）展示不同的tabbar
这里使用的是uview-ui@1.8.4 tabbar文章来源地址https://www.toymoban.com/news/detail-525966.html

1. 在utils文件夹下新建一个tabbar.js文件，来存储不同权限下的底部导航数据

// 用户tabbar
let tabUser = [
	{
		"pagePath": "/pages/index/index",
		"text": "首页",
		"iconPath": "/static/icon_bx.png",
		"selectedIconPath": "/static/icon_bx_hover.png"
	},
	{
		"pagePath": "/pages/index1/index",
		"text": "咨询",
		"iconPath": "/static/icon_adress.png",
		"selectedIconPath": "/static/icon_adress_hover.png"
	},
	{
		"pagePath": "/pages/index2/index",
		"text": "我的",
		"iconPath": "/static/icon_user.png",
		"selectedIconPath": "/static/icon_user_hover.png"
	}
]
// 物业tabbar
let tabPro = [
	{
		"pagePath": "/pages/index/index",
		"text": "首页",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
		"pagePath": "/pages/index1/index",
		"text": "咨询",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
		"pagePath": "/pages/index3/index",
		"text": "管理",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
		"pagePath": "/pages/index2/index",
		"text": "我的",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	}
]
export default [
	tabUser,
    tabPro]

1. 在page.json文件里，把tabbar里的几个页面去重放进去tabBar。

"tabBar": {
    "color": "#000",
    "selectedColor": "#567856",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text":""
      },
      {
        "pagePath": "pages/index1/index",
        "text":""
      },
      {
        "pagePath": "pages/index2/index",
        "text":""
      },
      {
        "pagePath": "pages/index3/index",
        "text":""
      }
    ]
  }

1. 使用vuex 新建store 文件夹存储相关数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import tabBar from '@/utils/tabbar.js'
const store = new Vuex.Store({
	state: {
		tabBarList: [],
		roleId: 0, //0 用户，1 物业
	},
	mutations: {
		// 设置角色ID
		setRoleId(state, data) {
			state.roleId = data;
			uni.setStorageSync('roleId',data)
			state.tabBarList = tabBar[data];
			uni.setStorageSync('tabBarList',tabBar[data])
		},
	},
})
export default store

1. 在入口文件 main.js 中使用

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
import store from './store/index'

Vue.use(uView);

Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

1. 在components中新建tabBar.vue 组件

<template>
  <view>
    <u-tabbar
      :list="tabBarList"
      @change="change"
      v-model="current"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :height="110"
      :border-top="borderTop"
    >
    </u-tabbar>
  </view>
</template>
<script>
export default {
  props: {
    tabBarList: {
      type: Array,
      default: () => uni.getStorageSync("tabBarList"),
    },
  },
  data() {
    return {
      borderTop: true,
      inactiveColor: "#000",
      activeColor: "#987435",
      current: 0,
    };
  },
  methods: {
    change(e) {
      const tabbar = uni.getStorageSync("tabBarList");
      console.log(tabbar);

      switch (e) {
        case 0:
          uni.switchTab({
            url: tabbar[0].pagePath,
          });
          break;
        case 1:
          uni.switchTab({
            url: tabbar[1].pagePath,
          });
          break;
        case 2:
          uni.switchTab({
            url: tabbar[2].pagePath,
          });
          break;
        case 3:
          uni.switchTab({
            url: tabbar[3].pagePath,
          });
          break;
        default:
          uni.switchTab({
            url: tabbar[0].pagePath,
          });
          break;
      }
    },
  },
};
</script>

1. 登录时，获取后端返回的权限这里没有接口就写死啦，然后再调用store里的setRole方法

<template>
  <view class="content">
    <u-button type="primary" text="登录" @click="login"></u-button>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      roleId: 1,
    };
  },
  methods: {
    ...mapMutations(["setRoleId"]),
    login() {
      this.setRoleId(this.roleId); // 0或者1
      uni.switchTab({
        url: "../index/index", // 跳转到首页
      });
    },
  },
};
</script>

1. tabbar页面使用组件

<template>
    <div>
      <tabBar />
    </div>
  </template>
  
  <script>
  import tabBar from '../../components/tabBar.vue';
  export default {
    components: {
      tabBar
    },
    data() {
      return {
        
      }
    }
  }
  
  </script>
  
  <style>
  
  </style>