自定义底部导航栏（tabBar）

Posted 2020-08-27 甲乙丙丁少

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

我YY的

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

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

 1 var host="/img/";
 2 var arr={
 3     //各种图片地址
 4     log0:host+\'log0.png\',
 5     log1:host+\'log1.png\',
 6     my0:host+\'my0.png\',
 7     my1:host+\'my1.png\',
 8     add:host+\'add.png\'
 9 }
10 function gets(arg){
11     return arr[arg];
12 }
13  module.exports ={
14   gets:gets
15 }

View Code

页面代码：index.wxml

 1 <!--选项卡-->
 2 <view class="tabBar">
 3    <block wx:for="{{tabBar}}">
 4         <view class="tarItem" bindtap="{{item.tarFunction}}" data-index="{{index}}" >
 5             <image class="tarIco" src="{{item.tarIco}}"></image>
 6             <view class="tarTxt" >{{item.tarTxt}}</view>
 7         </view>
 8    </block>
 9 </view>
10 
11 <!--选项卡对应的页面-->
12 <view class="pages1"  hidden="{{tabBar[0][\'isHidden\']}}">
13     pages1
14 </view>
15 <view class="pages2" hidden="{{tabBar[2][\'isHidden\']}}">
16     pages2
17 </view>

View Code

页面样式：index.wxss

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

View Code

页面逻辑：index.js

 1 var imgURI_js = require(\'../../utils/imgURI.js\');
 2 Page({
 3   data: {
 4      //配置选项卡
 5       tabBar:[
 6         {
 7          tarFunction:\'log\' ,
 8          tarIco:imgURI_js.gets(\'log1\'),
 9          tarTxt:\'日志\', isHidden:false
10         },
11         {
12          tarFunction:\'add\',
13          tarIco:imgURI_js.gets(\'add\'),
14          tarTxt:\'添加\', isHidden:true
15         },
16         {
17          tarFunction:\'my\' ,
18          tarIco:imgURI_js.gets(\'my0\'),
19          tarTxt:\'备忘\', isHidden:true
20         }
21       ]
22   },
23 
24   //点击日志tab
25   log:function(e){
26     var that=this;
27     var click=e.currentTarget.dataset.index;
28     //回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。
29     that.data.tabBar.forEach(function(value, index, array){
30         if(index!=click){array[index][\'isHidden\']=true;}
31         else{array[index][\'isHidden\']=false; }
32     })
33     that.data.tabBar[0][\'tarIco\']=imgURI_js.gets(\'log1\');
34     that.data.tabBar[2][\'tarIco\']=imgURI_js.gets(\'my0\');
35     that.setData(that.data);
36   },
37 
38   //点击添加tab
39   add:function(){
40     var that=this;
41     wx.showActionSheet({
42       itemList: [\'新增日程\', \'新增备忘\'],
43       success: function(res) {
44         console.log(res.tapIndex)
45       }
46     })
47   },
48 
49   //点击备忘tab
50   my:function(e){
51     var that=this;
52     var click=e.currentTarget.dataset.index;
53     that.data.tabBar.forEach(function(value, index, array){
54         if(index!=click){array[index][\'isHidden\']=true;}
55         else{array[index][\'isHidden\']=false;}
56     });
57     that.data.tabBar[0][\'tarIco\']=imgURI_js.gets(\'log0\');
58     that.data.tabBar[2][\'tarIco\']=imgURI_js.gets(\'my1\');
59     that.setData(that.data);
60   }
61 })

View Code

页面所用图片
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