最近做項目的時候，突然來了個小特殊的需求，根據(jù)客戶的類型來動態(tài)顯示底部的tabBar菜單。當(dāng)時我就有點小懵逼了，這個不是小程序自帶的組件么？還要做成動態(tài)？這就有點尷尬了.....
不過也只是一時尷尬而已，然后我就展開了搜索之旅.....然后發(fā)現(xiàn)，官方的組件確實沒辦法做動態(tài)，那咋辦，如果真的有這個需求那也是得去處理滴呀~然后也看了有一些做到這效果的方法，那就試一下唄。。其實就是自定義個tabBar的模板，以下是實現(xiàn)：

首先，既然是說自定義組件，那是用到template了。那先在Page里新建個template的文件夾，以便放tabBar的組件。

TIM圖片20171128141629.png

然后新建個tabBar.wxml文件，這里就寫下你的tabBar的結(jié)構(gòu)。

<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="img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>  
      <text class='tabbar_text'>{{item.text}}</text>    
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

下面是tabBar所需要用到的樣式，我這里就直接寫在全局app.wxss了。

.menu-item{  
  width: 32%;  
  float: left;  
  text-align: center;  
  padding-top: 8px;  
}  
.menu-item2{  
  width: 24%;  
  float: left;  
  text-align: center;  
  padding-top: 8px;  
}  
.img{  
  width: 30rpx;  
  height: 30rpx;  
  display: block;  
  margin:auto;  
}  
.clear{  
  clear: both;  
}  
.tab-bar{  
  position: fixed;  
  width: 100%;  
  padding: 0px 2%;  
}  
.tabbar_text{
  font-size: 28rpx
}

然后接下來是js的部分，由于是底部的導(dǎo)航，那肯定是不止一個頁面用到的，那這里就可以寫在全局的app.js里面方便使用。這里我寫了兩種tabBar的模板，分別對應(yīng)來顯示

//app.js
App({
  onLaunch: function () {
    // // 展示本地存儲能力
    // var logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

  },
  //第一種狀態(tài)的底部  
  editTabBar: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    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;//根據(jù)頁面地址設(shè)置當(dāng)前頁面狀態(tài)    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },
  //第二種狀態(tài)的底部  
  editTabBar2: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar2;
    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;//根據(jù)頁面地址設(shè)置當(dāng)前頁面狀態(tài)    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },  
  globalData: {
    userInfo: null,
    pop:2,
    num:0,
    tabBar: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "首頁",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "clas": "menu-item",
          "selectedColor": "#4665f9",
          active: true
        },
        {
          "pagePath": "/pages/log/index",
          "text": "日志",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "selectedColor": "#4665f9",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/my/index",
          "text": "我的",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "selectedColor": "#4665f9",
          "clas": "menu-item",
          active: false
        }
      ],
      "position": "bottom"
    },
    tabBar2: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "首頁",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "clas": "menu-item2",
          "selectedColor": "#4665f9",
          active: true
        },
        {
          "pagePath": "/pages/log/index",
          "text": "日志",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "selectedColor": "#4665f9",
          "clas": "menu-item2",
          active: false
        },
        {
          "pagePath": "/pages/my/index",
          "text": "我的",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "selectedColor": "#4665f9",
          "clas": "menu-item2",
          active: false
        },
        {
          "pagePath": "/pages/new/index",
          "text": "新的",
          "iconPath": "/img/home.png",
          "selectedIconPath": "/img/home_on.png",
          "selectedColor": "#4665f9",
          "clas": "menu-item2",
          active: false
        }
      ],
      "position": "bottom"
    }
  }
})

然后在需要用到這個組件的頁面上直接調(diào)用。比如這里的index頁面。

<!--index.wxml-->
<import src="../template/tabbar.wxml"/>
首頁
<template is="tabBar" data="{{tabBar:tabBar}}"></template>

image.png

然后去index.js里面調(diào)用tabBar

image.png

然后下面是效果圖。

image.png

就這些。我個人覺得這個自定義導(dǎo)航的用戶體驗不是很好，能不用就不要用，不過知道下方法也是ok滴！如有發(fā)現(xiàn)有錯或者不足的地方可以指出，謝謝！