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

Posted 2023-04-02 沐言鸭

在我们开发小程序的过程中，会遇到权限登录问题，不同的角色登录后显示的底部导航栏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

小程序自定义底部导航缓存

1、可以使用小程序的storage本地存储功能，将用户在底部导航栏点击的内容存储在storage中，开发者可以在每次用户进入小程序时，获取storage中存储的信息，实现自定义底部导航缓存。
2、也可以使用小程序的session本地存储功能，将用户在底部导航栏点击的内容存储在session中，开发者可以在每次用户进入小程序时，获取session中存储的信息，实现自定义底部导航缓存。
3、可以使用小程序的openid，将用户在底部导航栏点击的内容存储在openid中，开发者可以在每次用户进入小程序时，获取openid中存储的信息，实现自定义底部导航缓存。
4、也可以使用小程序的云数据库，将用户在底部导航栏点击的内容存储在云数据库中，开发者可以在每次用户进入小程序时，获取云数据库中存储的信息，实现自定义底部导航缓存。 参考技术A 小程序自定义底部导航缓存是指在小程序中，可以自定义底部导航栏的缓存功能，这样可以让用户在进入小程序时，可以直接跳转到上次访问的页面，从而提升用户体验。为了实现这一功能，开发者可以使用小程序的API，在用户访问小程序的每一个页面时，将用户的访问路径保存到本地缓存中，当用户再次进入小程序时，可以直接跳转到最近访问的页面。 参考技术B 小程序的自定义底部导航可以使用本地缓存，当页面跳转时，保存小程序页面的相关信息到本地缓存，再加载相应的页面时，可以使用自定义底部导航时保存的信息进行页面展示优化。 参考技术C 可使用小程序原生的tabbar的时候就用原生的,由于原生的体验上会更好一些。固然,若是不得不用自定义导航的时候不如就好好设计一下。