自定义底部导航栏（tabBar）

前言
如果大家用过微信提供的tabBar就会发现，他的tabBar有很大的局限性。
暂且不说样式局限性了，他提供的app.json配置文件中没有function。
这也就意味着使用它提供的这个组件，你只能用于跳转页面，不能干其它的事情

我YY的

以下是代码
说明：小程序的很大异步分思想体现了封装，以提高复用性。对此，一些简单代码我也封装了，考虑到了以后维护的方便性
目录结构如下：

图片配置文件：imgURI.js（由于小程序不支持xml和读取本地json，故用js代替）

var host="/img/";
var arr={
    //各种图片地址
    log0:host+'log0.png',
    log1:host+'log1.png',
    my0:host+'my0.png',
    my1:host+'my1.png',
    add:host+'add.png'
}
function gets(arg){
    return arr[arg];
}
 module.exports ={
  gets:gets
}

页面代码：index.wxml

<!--选项卡-->
<view class="tabBar">
   <block wx:for="{{tabBar}}">
        <view class="tarItem" bindtap="{{item.tarFunction}}" data-index="{{index}}" >
            <image class="tarIco" src="{{item.tarIco}}"></image>
            <view class="tarTxt" >{{item.tarTxt}}</view>
        </view>
   </block>
</view>

<!--选项卡对应的页面-->
<view class="pages1"  hidden="{{tabBar[0]['isHidden']}}">
    pages1
</view>
<view class="pages2" hidden="{{tabBar[2]['isHidden']}}">
    pages2
</view>

页面样式：index.wxss

.tabBar{width: 100%; 
       display: flex; flex-direction: row; justify-content:space-around;
       position: fixed; bottom: 0;
       border-top:red solid 1rpx; padding: 6rpx 0
        }
.tarItem{text-align: center; font-size:30rpx; }
.tarIco{width: 60rpx; height: 60rpx}

页面逻辑：index.js

var imgURI_js = require('../../utils/imgURI.js');
Page({
  data: {
     //配置选项卡
      tabBar:[
        {
         tarFunction:'log' ,
         tarIco:imgURI_js.gets('log1'),
         tarTxt:'日志', isHidden:false
        },
        {
         tarFunction:'add',
         tarIco:imgURI_js.gets('add'),
         tarTxt:'添加', isHidden:true
        },
        {
         tarFunction:'my' ,
         tarIco:imgURI_js.gets('my0'),
         tarTxt:'备忘', isHidden:true
        }
      ]
  },

  //点击日志tab
  log:function(e){
    var that=this;
    var click=e.currentTarget.dataset.index;
    //回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。
    that.data.tabBar.forEach(function(value, index, array){
        if(index!=click){array[index]['isHidden']=true;}
        else{array[index]['isHidden']=false; }
    })
    that.data.tabBar[0]['tarIco']=imgURI_js.gets('log1');
    that.data.tabBar[2]['tarIco']=imgURI_js.gets('my0');
    that.setData(that.data);
  },

  //点击添加tab
  add:function(){
    var that=this;
    wx.showActionSheet({
      itemList: ['新增日程', '新增备忘'],
      success: function(res) {
        console.log(res.tapIndex)
      }
    })
  },

  //点击备忘tab
  my:function(e){
    var that=this;
    var click=e.currentTarget.dataset.index;
    that.data.tabBar.forEach(function(value, index, array){
        if(index!=click){array[index]['isHidden']=true;}
        else{array[index]['isHidden']=false;}
    });
    that.data.tabBar[0]['tarIco']=imgURI_js.gets('log0');
    that.data.tabBar[2]['tarIco']=imgURI_js.gets('my1');
    that.setData(that.data);
  }
})

页面所用图片
log0:http://i1.piimg.com/580831/21427560d907daa1.png
log1:http://i1.piimg.com/580831/7301f39e7cd93dd8.png
add:http://i1.piimg.com/580831/ce49d7bc59e84c46.png
my0:http://i1.piimg.com/580831/091ca02deae1664b.png
my1:http://i1.piimg.com/580831/c5118f811ed44e28.png

效果预览

完整项目下载：https://git.oschina.net/dingshao/wechatApp_tabBar.git