微信小程序之自定義tabBar及切換不同版本顯示不同tabBar

今天，我在寫頁面的時候，碰到需要切換不同身份（兩個版本）時候底部tabBar顯示不同，我的解決方法是：

首先在components（組件模板）下新建一個tabBar.wxml:

<template name="tabBar">    
  <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">    
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">    
    <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="tab-img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="tab-img"></image>  
      <text>{{item.text}}</text>    
    </navigator>    
    </block>     
  </view>    
</template>   

然後在app.js中

 //底部導航版本1  
  editTabBar: function() {
    //使用getCurrentPages可以獲取當前加載中所有的頁面對象的一個數組，數組最後一個就是當前頁面。
    var curPageArr = getCurrentPages(); //獲取加載的頁面
    var curPage = curPageArr[curPageArr.length - 1]; //獲取當前頁面的對象
    var pagePath = curPage.route; //當前頁面url
    if (pagePath.indexOf('/') != 0) {
      pagePath = '/' + pagePath;
    }

    var tabBar = this.globalData.tabBar;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == pagePath) {
        tabBar.list[i].active = true; //根據頁面地址設置當前頁面狀態    
      }
    }
    curPage.setData({
      tabBar: tabBar
    });
  },
  //底部導航版本2
  editTabBar1: function() {
    var curPageArr = getCurrentPages();
    var curPage = curPageArr[curPageArr.length - 1];
    var pagePath = curPage.route;
    if (pagePath.indexOf('/') != 0) {
      pagePath = '/' + pagePath;
    }
    var tabBar = this.globalData.tabBar1;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == pagePath) {
        tabBar.list[i].active = true;
      }
    }
    curPage.setData({
      tabBar: tabBar
    });
  },

 globalData: {
    //版本1底部導航欄顯示
    tabBar: {
      "color": "#9E9E9E",
      "list": [
        {   
          "pagePath": "/pages/student/student",
          "text": "服務",
          "iconPath": "../../images/fuwu.png",
          "selectedIconPath": "../../images/fuwu-active.png",
          "clas": "tab-item",
          "selectedColor": "#4EDF80",
          active: true
        },
        {
          "pagePath": "/pages/mine/mine",
          "text": "我的",
          "iconPath": "../../images/mine.png",
          "selectedIconPath": "../../images/mine-active.png",
          "selectedColor": "#4EDF80",
          "clas": "tab-item",
          active: false
        }
      ],
      "position": "bottom"
    },
    //版本2底部導航欄顯示
    tabBar1: {
      "color": "#9E9E9E",
      "list": [   
        {
          "pagePath": "/pages/teacher/teacher",
          "text": "服務",
          "iconPath": "../../images/fuwu.png",
          "selectedIconPath": "../../images/Tfuwu-active.png",
          "clas": "tab-item",
          "selectedColor": "#2180ed",
          active: true
        },
        {
          "pagePath": "/pages/Tmine/Tmine",
          "text": "我的",
          "iconPath": "../../images/mine.png",
          "selectedIconPath": "../../images/Tmine-active.png",
          "selectedColor": "#2180ed",
          "clas": "tab-item",
          active: false
        }
      ],
      "position": "bottom"
    }
  },

接着app.wxss

.tab-item {
  padding: 0 20rpx;
  text-align: center;
  padding-top: 8px;
}

.tab-img {
  width: 23px;
  height: 23px;
  display: block;
  margin: auto;
}

.tab-bar {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

寫好了兩個不同的底部導航的樣式後，下一步就是在你需要頁面中如何引用了。

我這裏根據我的需求在四個頁面中做了引用，例如：student.wxml

<!-- 引入底部導航欄 -->
<import src="../../components/tabBar.wxml" />
<template is="tabBar" data="{{tabBar}}" />

然後是在對應的js中加入兩句話，這裏對應的js頁面是student.js,首先要記得在頂部寫上var app = getApp();,然後在onload(),或者onshow()方法中添加上

   onLoad: function (options) {
    app.editTabBar();    //顯示自定義的底部導航
  },

到這裏就搞定了自定義tabBar的使用了。

效果圖如下：

這裏要注意，如果你要引用另一個版本的底部TabBar，只需注意js中的onload（）或者onshow（）

好了，以上就是我的分享了，有更好的方法可以評論區告訴我。