赞
踩
比如绑定openId展示的tabbar为:首页、巡检、工单
未绑定openId展示的tabbar为:在线报修、我的报修
首页配置pages.json中的tabbar:
这里只用配置pagePath就可以了~
具体代码如下:
- "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文件:
具体代码如下:
注意: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 :
具体代码如下:
- 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简易了解:
在main.js中引入并挂载store:
在Login页面引入自定义tabbar页面并判断:
最后在每个页面使用动态的tabbar:
具体代码如下:
- <!-- 动态渲染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',
- }
- }
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。