共计 3105 个字符,预计需要花费 8 分钟才能阅读完成。
介绍:
当初咱们要满足的我的项目需要是依据登录用户角色的不同,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/…,只是在文章中批改了代码、图片以及少部分注意事项。
正文完