基于Uview 自定义tabbar 不同账号显示不同的tabbar

最新推荐文章于 2024-09-03 00:27:17 发布

LDL_CQ

最新推荐文章于 2024-09-03 00:27:17 发布

阅读量820

点赞数

文章标签：小程序 html5 html uni-app

本文链接：https://blog.csdn.net/LDL_CQ/article/details/120137922

版权

1、在package.json中将原本的修改为

   "tabBar": {
       "list": [{
               "pagePath": "pages/home/home"
           },
           {
               "pagePath": "pages/my4/my4_performance"
           },
           {
               "pagePath": "pages/my4/my4_approve"
           },
           {
               "pagePath": "pages/my/my_new"
           }
       ]
   }

2.创建公共的common.js 导出两种tabbar

export const tabbar = [{
       iconPath: "/static/image/icon/tab01.png",
       selectedIconPath: "/static/image/icon/tab1.png",
       text: '首页',
       customIcon: false,
       pagePath: '/pages/home/home',
   },
   {
       iconPath: "/static/image/icon/tab02.png",
       selectedIconPath: "/static/image/icon/tab2.png",
       text: '绩效',
       customIcon: false,
       pagePath: '/pages/my4/my4_performance',
   },
   {
       iconPath: "/static/image/icon/tab03.png",
       selectedIconPath: "/static/image/icon/tab3.png",
       text: '审批',
       customIcon: false,
       pagePath: '/pages/my4/my4_approve',
   },
   {
       iconPath: "/static/image/icon/tab04.png",
       selectedIconPath: "/static/image/icon/tab4.png",
       text: '我的',
       customIcon: false,
       pagePath: '/pages/my/my_new',
   }
]

export const tabbar2 = [{
       iconPath: "/static/image/icon/tab01.png",
       selectedIconPath: "/static/image/icon/tab1.png",
       text: '首页',
       customIcon: false,
       pagePath: '/pages/home/home',
   },
   {
       iconPath: "/static/image/icon/tab04.png",
       selectedIconPath: "/static/image/icon/tab4.png",
       text: '我的',
       customIcon: false,
       pagePath: '/pages/my/my_new',
   }
]

3.在页面中导入

import { tabbar, tabbar2} from "../../common/common.js"

在data中定义：

list: tabbar,
list2: tabbar2,

current: 0, //当前的索引
inactiveColor: '#7A7E83', //未选中颜色
activeColor: '#fd9928', //选中颜色

4.每个需要的页面中添加组件

//根据iscustomer，判断显示哪种tabbar

<u-tabbar v-model="current" :list="iscustomer?list2:list" :inactive-color="inactiveColor"
:activeColor="activeColor">
</u-tabbar>