微信小程序中间导航图标设置（微信小程序自定义导航栏，实现不同用户角色登陆后显示不同的tabbar（避坑版））

在我们开发小程序的过程中              ，会遇到权限登录问题  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，不同的角色登录后显示的底部导航栏tabbar是不一样的
  
  
  
  
  
  
  
。网上看到了很多的博客














，多多少少会有些坑
  
  
  
  
  
  
  ，会遇到问题 
  
  
  
  
  
  
 。今天这篇博客就可以一次性解决 


 


 


 


 


 


 


 。

了解概念

自定义tabbar

使用方法

app.json中声明custom字段为true

“custom              ”: true

"tabBar": { "custom": true, "selectedColor": "#3161ff", "list": [ { "pagePath": "pages/index/index", "text": "检查", "iconPath": "./assets/tabbar/check.png", "selectedIconPath": "./assets/tabbar/check_select.jpg" }, { "pagePath": "pages/approval/index", "text": "审批", "iconPath": "./assets/tabbar/approval.png", "selectedIconPath": "./assets/tabbar/approval_select.png" }, { "pagePath": "pages/mine/index", "text": "我的", "iconPath": "./assets/tabbar/me.png", "selectedIconPath": "./assets/tabbar/me_select.png" } ] }, 根目录添加入口文件

在根目录新建文件夹  
  
  
  
  
  
  
 ，名为custom-tab-bar（名字一定不能改）

在custom-tab-bar文件夹点击右键
 


 


 


 


 


 


 


，新建Component
 
 
 
 
 
 
 ，名字是index（这个也不能改   
   
   
   
   
   
   
 ，都是官方要求的
 

 

 

 

 

 

 

，改了无法显示了）

编写代码

custom-tab-bar/index.wxml

<!--custom-tab-bar/index.wxml--> <view class="tab-bar"> <view class="tab-bar-border"></view> <view wx:for="{{selectList}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-selected="{{item.selected}}" bindtap="switchTab"> <image class="cover-image" src="{{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image> <view class="cover-view" style="color: {{selected === item.selected ? selectedColor : color}}">{{item.text}}</view> </view> </view>

custom-tab-bar/index.wxss

/* custom-tab-bar/index.wxss */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } .tab-bar-border { background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5); } .tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-bar-item .cover-image { width: 44rpx; height: 44rpx; } .tab-bar-item .cover-view { margin-top: 8rpx; font-size: 24rpx; }

custom-tab-bar/index.js

// custom-tab-bar/index.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { selectedColor: "#3161ff", allList: [ [{ "pagePath": "/pages/index/index", "text": "检查", "iconPath": "../assets/tabbar/check.png", "selectedIconPath": "../assets/tabbar/check_select.jpg", "selected": "index" }, { "pagePath": "/pages/mine/index", "text": "我的", "iconPath": "../assets/tabbar/me.png", "selectedIconPath": "../assets/tabbar/me_select.png", "selected": "mine" } ], [{ "pagePath": "/pages/index/index", "text": "检查", "iconPath": "../assets/tabbar/check.png", "selectedIconPath": "../assets/tabbar/check_select.jpg", "selected": "index" }, { "pagePath": "/pages/approval/index", "text": "审批", "iconPath": "../assets/tabbar/approval.png", "selectedIconPath": "../assets/tabbar/approval_select.png", "selected": "approval" }, { "pagePath": "/pages/mine/index", "text": "我的", "iconPath": "../assets/tabbar/me.png", "selectedIconPath": "../assets/tabbar/me_select.png", "selected": "mine" } ] ], selectList: [] }, /** * 生命周期方法 */ attached() { this.setData({ selectList: this.data.allList[1] }) }, /** * 组件的方法列表 */ methods: { switchTab(e) { // console.log(e.currentTarget.dataset); let path = e.currentTarget.dataset.path; let selected = e.currentTarget.dataset.selected // console.log(e.currentTarget.dataset.selected); wx.switchTab({ url: path, }) } } })

在每个Page的js文件中的onShow方法里

 

 

 

 

 

 

 ，添加如下代码

pages\approval\index.js

onShow() { if(typeof this.getTabBar === function && this.getTabBar()) { this.getTabBar().setData({ selected: "approval" }) } },

以此类推

pages\index\index.js

onShow() { if(typeof this.getTabBar === function && this.getTabBar()) { this.getTabBar().setData({ selected: "index" }) } }

pages\mine\index.js

onShow() { if (typeof this.getTabBar === function && this.getTabBar()) { this.getTabBar().setData({ selected: "mine" }) } },

这里面selected的值对应的就是allLIst数组中的selected字段               ，选中哪个
 
 

 
 

 
 

 
 

 
 

 
 

 
 

，哪个就会实现颜色改变切换
 
 
 
 
 
 
 
。

解释说明

这里我们做的是自定义导航栏













，所以在custom-tab-bar/index.wxml显示  
   
   
   
   
   
   
 。

for循环的是选中的数组                      ，渲染出该数组的image和文字

通过custom-tab-bar/index.js中attachec生命周期选中的selectList: this.data.allList[1]/selectList: this.data.allList[0]实现不同tabbar切换

的selected字段 
 
 
 
 
 
 
 
 
 
 
 
 
 
，选中哪个





















，哪个就会实现颜色改变切换 

 

 

 

 

 

 

 。

解释说明

这里我们做的是自定义导航栏              ，所以在custom-tab-bar/index.wxml显示

 

 

 

 

 

 

 
。

for循环的是选中的数组  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，渲染出该数组的image和文字

通过custom-tab-bar/index.js中attachec生命周期选中的selectList: this.data.allList[1]/selectList: this.data.allList[0]实现不同tabbar切换

因为这个是小demo还没做角色信息啥的














，等真正做开发的时候就可以把获取过来的角色id进行判断
  
  
  
  
  
  
  ，判断是渲染哪个list