介绍：

当初咱们要满足的我的项目需要是依据登录用户角色的不同，tabBar的数量和内容显示不同，如下图

用户角色为管理员时：

用户为普通用户时：

留神：以下所有的设置在uView框架下的微信小程序中应用没有问题，其余的小程序客户端或者框架未尝试

一、配置tabBar

  • 创立tabBar中须要展现的所有页面，包含不同角色展现的不同的页面
  • 关上pages.json页面配置tabBar项，所有须要在tabBar中呈现的页面这里都须要配置，须要特地留神的是：custom必须配置未true，如果不配置，在关上小程序的时候会先加载自带的tabBar，再加载自定义的tabBar，影响应用的成果
"tabBar": {    "custom": true,    "color": "#909399",    "selectedColor": "#303133",    "backgroundColor": "#FFFFFF",    "borderStyle": "black",    "list":[        {            "pagePath": "pages/index/index",            "iconPath": "static/uview/tabs/discount.png",            "selectedIconPath":"static/uview/tabs/discount_selected.png",                "text": "优惠"            },            {                "pagePath": "pages/category/category",                "iconPath": "static/uview/tabs/products.png",                "selectedIconPath": "static/uview/tabs/products_selected.png",                "text": "商品"            },            {                "pagePath": "pages/user/user",                "iconPath": "static/uview/tabs/user.png",                "selectedIconPath": "static/uview/tabs/user_selected.png",                "text": "用户核心"            }        ]    },"usingComponents": {}
  • 创立utils目录，在目录下新建tabBar.js文件，这个文件用于自定义tabBar属性的文件，用来笼罩自带的配置
// 一般的用户const generalUser = [    {        text: "优惠",        pagePath: "/pages/index/index",        iconPath: "/static/uview/tabs/discount.png",        selectedIconPath: "/static/uview/tabs/discount_selected.png"    },    {        text: "商品",        pagePath: "/pages/category/category",        iconPath: "/static/uview/tabs/products.png",        selectedIconPath: "/static/uview/tabs/products_selected.png"    },    {        text: "我的",        pagePath: "/pages/user/user",        iconPath: "/static/uview/tabs/user.png",        selectedIconPath: "/static/uview/tabs/user_selected.png"    }]// 小程序管理者const admin = [    {        text: "优惠",        pagePath: "/pages/index/index",        iconPath: "/static/uview/tabs/discount.png",        selectedIconPath: "/static/uview/tabs/discount_selected.png"    }]// 配送员const courier = [    {        text: "首页",        pagePath: "/pages/index/index",        iconPath: "/static/uview/tabs/discount.png",        selectedIconPath: "/static/uview/tabs/discount_selected.png"    },    {        text: "我的",        pagePath: "/pages/user/user",        iconPath: "/static/uview/tabs/user.png",        selectedIconPath: "/static/uview/tabs/user_selected.png"    }]export default {    generalUser,    admin,    courier}
这里须要留神配置页面的程序和图片资源的门路，这里的程序是展现时的程序，图片门路static前必须加上/，否则会找不到

二、配置vuex

uniapp框架集成了vuex，能够间接应用

  • 在store目录下创立modules文件夹，在modules文件夹下新建tabBar.js文件，该文件用于对不同的登陆角色做判断，依据后果展现不同的tabBar和页面。
import tabBar from "../../utils/tabBar.js"// 判断以后登陆用户角色// 0 为管理员// 1 为普通用户// 2 为快递员// 三元表达式判断以后登陆的用户角色var user_type = uni.getStorageInfoSync("userType")let type = user_type === 0 ? 'admin': user_type === 1 ? "generalUser" : "courier"const state = {    list: tabBar[type]}export default {    namespaced: true,    state}
  • 在store目录下新建getters.js文件并配置
const getters = {    tabBarList: state => state.tabBar.list,}export default getters
  • 配置store目录下的index.js文件
import getters from './getters.js'import tabBar from './modules/tabBar.js'const store = new Vuex.Store({    modules: {        tabBar    },    getters}
  • 配置main.js文件，引入stroe
import store from '@/store';const app = new Vue({    store});

三、引入组件

在每个须要展现tabBar的页面引入uView中的tabBar组件，父传子传值，一些固定的值能够不传值间接在组件中批改

// template局部，u-tabBar放在页面展现最初<u-tabbar    :list="tabBarList"    :active-color="activeColor"    :inactive-colot="inactiveColor"></u-tabbar>// js局部<script>    import { mapGetters } from 'vuex'    export default {        data() {            return {                activeColor: "#fa3534", // 选中时的色彩                inactiveColor: "#000"  // 未选中时的色彩            }        },        computed: {            ...mapGetters([                'tabBarList',  // 获取展现的tabBar列表            ])        }    }</script>

完结！

文章内容次要引自https://chowdera.com/2021/01/...，只是在文章中批改了代码、图片以及少部分注意事项。