首页 > 代码库 > 自定义底部导航栏（tabBar）

自定义底部导航栏（tabBar）

2024-08-31 19:15:40   213人阅读

前言
如果大家用过微信提供的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:gets15 }
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     pages114 </view>15 <view class="pages2" hidden="{{tabBar[2][‘isHidden‘]}}">16     pages217 </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 05         }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:false10         },11         {12          tarFunction:‘add‘,13          tarIco:imgURI_js.gets(‘add‘),14          tarTxt:‘添加‘, isHidden:true15         },16         {17          tarFunction:‘my‘ ,18          tarIco:imgURI_js.gets(‘my0‘),19          tarTxt:‘备忘‘, isHidden:true20         }21       ]22   },23 24   //点击日志tab25   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   //点击添加tab39   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   //点击备忘tab50   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

自定义底部导航栏（tabBar）


联系
我们