uniapp踩坑之项目：简易版不同角色显示不一样的tabbar和页面
1.
pages下创建三个不同用户身份的“我的”页面。
显示第几个tabbar，0是管理员 1是财务 2是司机
2.
在uni_modules文件夹创建底部导航cc-myTabbar文件夹，在cc-myTabbar文件夹创建components文件夹，在components文件夹创建cc-myTabbar.vue组件
3.
在utils文件夹创建tabBar.js
4.
pages.json里指定路径
5.
在单页面引入底部导航组件
//cc-myTabbar.vue 底部导航组件
{{item.name}}
//在components文件夹里创建cc-myTabbar.scss
//cc-myTabbar.scss
/* 主要颜色 */
$base: #508AF1; // 基础颜色
.page-total {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
// height: 100rpx;
}
.tab-list {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 140rpx;
padding-bottom: 20rpx;
background-color: #FFFFFF;
// border-top: 1px solid #e8e8e8;
.list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 38%;
height: 120rpx;
image {
width: 48rpx;
height: 48rpx;
background-color: white;
}
text {
color: #707070;
font-weight: 900;
font-size: 24rpx;
margin-top: 10rpx;
}
.action {
color: $base;
}
}
}//tabBar.js
// 小程序管理者
const admin = [
{
pagePath: "/pages/homePage/homePage",
index: 0,
name: '首页',
img: '/static/images/tabBar/tab_01.png',
acImg: '/static/images/tabBar/tab_02.png'
},
// {
// index: 2,
// name: '',
// img: '/static/images/tabBar/tab_03.png',
// acImg: '/static/images/tabBar/tab_04.png'
// },
{
pagePath: "/pages/mine/mine",
index: 1,
name: '我的',
img: '/static/images/tabBar/tab_05.png',
acImg: '/static/images/tabBar/tab_06.png'
},
]
// 财务
const finance = [
{
pagePath: "/pages/homePage/homePage",
index: 0,
name: '首页',
img: '/static/images/tabBar/tab_01.png',
acImg: '/static/images/tabBar/tab_02.png'
},
// {
// index: 1,
// name: '',
// img: '/static/images/tabBar/tab_03.png',
// acImg: '/static/images/tabBar/tab_04.png'
// },
{
pagePath: "/pages/mineFinance/mineFinance",
index: 1,
name: '我的',
img: '/static/images/tabBar/tab_05.png',
acImg: '/static/images/tabBar/tab_06.png'
},
]
// 司机
const driver = [
{
pagePath: "/pages/homePage/homePage",
index: 0,
name: '首页',
img: '/static/images/tabBar/tab_01.png',
acImg: '/static/images/tabBar/tab_02.png'
},
// {
// pagePath: "/pages/scan/scan",
// index: 1,
// name: '',
// img: '/static/images/tabBar/tab_03.png',
// acImg: '/static/images/tabBar/tab_04.png'
// },
{
pagePath: "/pages/mineDriver/mineDriver",
index: 1,
name: '我的',
img: '/static/images/tabBar/tab_05.png',
acImg: '/static/images/tabBar/tab_06.png'
},
]
export default {
admin,
finance,
driver
}// pages.json
{
"pages": [
{
"path": "pages/homePage/homePage",
"style": {
"navigationBarTitleText": "首页"
// "navigationStyle": "custom"
}
},
{
"path": "pages/login",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/register",
"style": {
"navigationBarTitleText": "注册"
}
},
{
"path": "pages/work/work",
"style": {
"navigationBarTitleText": "工作台"
}
},
{
"path": "pages/mine/mine", //管理员
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/mineDriver/mineDriver", // 司机
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/mineFinance/mineFinance", // 财务
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/mine/avatar/index",
"style": {
"navigationBarTitleText": "修改头像"
}
},
{
"path": "pages/mine/info/index",
"style": {
"navigationBarTitleText": "个人信息"
}
},
{
"path": "pages/mine/info/edit",
"style": {
"navigationBarTitleText": "编辑资料"
}
},
{
"path": "pages/mine/pwd/index",
"style": {
"navigationBarTitleText": "修改密码"
}
},
{
"path": "pages/mine/setting/index",
"style": {
"navigationBarTitleText": "应用设置"
}
},
{
"path": "pages/mine/help/index",
"style": {
"navigationBarTitleText": "常见问题"
}
},
{
"path": "pages/mine/about/index",
"style": {
"navigationBarTitleText": "关于我们"
}
},
],
"tabBar": {
"custom": true, // 隐藏tabBar
"color": "#000000",
"selectedColor": "#508af1", // 选中颜色
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/homePage/homePage"
// "iconPath": "static/images/tabbar/tab_01.png",
// "selectedIconPath": "static/images/tabbar/tab_02.png",
// "text": "首页"
},
// {
// "pagePath": "pages/work/work",
// "iconPath": "static/images/tabbar/work.png",
// "selectedIconPath": "static/images/tabbar/work_.png",
// "text": "工作台"
// },
{
"pagePath": "pages/mine/mine"
// "iconPath": "static/images/tabbar/tab_09.png",
// "selectedIconPath": "static/images/tabbar/tab_10.png",
// "text": "我的"
},
{
"pagePath": "pages/mineDriver/mineDriver"
// "iconPath": "static/images/tabbar/tab_09.png",
// "selectedIconPath": "static/images/tabbar/tab_10.png",
// "text": "我的"
},
{
"pagePath": "pages/mineFinance/mineFinance"
// "iconPath": "static/images/tabbar/tab_09.png",
// "selectedIconPath": "static/images/tabbar/tab_10.png",
// "text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "RuoYi",
"navigationBarBackgroundColor": "#FFFFFF"
}
}// 单页面
// mine.vue管理员版"我的"页面 / mineDriver.vue司机版"我的"页面 / mineFinance.vue财务版"我的"页面
上一篇文章，
vue2踩坑之项目：vue2+element实现前端导出_vue2导出 type为text/plain 找不到状态code值-CSDN博客文章浏览阅读392次，点赞8次，收藏9次。vue2踩坑之项目：vue2+element实现前端导出。安装插件依赖 npm i --save [email protected] [email protected]，单页面引入 前端导出插件_vue2导出 type为text/plain 找不到状态code值https://blog.csdn.net/weixin_43928112/article/details/135685385