自定义底部导航栏（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:;
        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