微信小程序 tabBar模板

tabBar导航栏

小程序tabBar，我们可以通过app.json进行配置，可以放置于顶部或者底部，用于不同功能页面的切换，挺好的。。。

但，，，貌似不能让动态修改tabBar(需求：通过switch开关改变小程序皮肤（包括改变标题栏背景色、tabBar图标及文字颜色、页面部分样式)，虽然wx.setTabBarItem(OBJECT)能改变图标，但字体颜色不可以。。。所以改为tabBar模板用法）

我把配置数据统一放在app.js文件，通过点击跳转页面后在把数据添加到当前页面实例上，具体做法如下：

1、新建一个tarBar.wxml模板页，代码如下：

<template name="tabBar">  
  <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.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.active?'':item.pagePath}}" hover-class='none' open-type="reLaunch" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>
      <text>{{item.text}}</text>
    </navigator>
    </block>  
  </view>  
</template>

2、样式    app.wxss

/*tabBar*/
.tab-bar {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100rpx;
  /*line-height: 100rpx;*/
  font-size: 22rpx;
  color: #9b9b9b;
  background: #fff;
  text-align: center;
  display: -webkit-flex;
  display:flex;
}

.tab-bar .menu-item {
  display: block;
  flex: 1;
  /*width: 33.3%;*/
  height: 100%;
}

.tab-bar .menu-item image {
  margin: 10rpx auto 0 auto;
  display: block;
  width: 50rpx;
  height: 50rpx;
}

.tab-bar .menu-item.active {
  color: #53df87;
}

 

3、app.js：配置tabBar数据

App({
   
    globalData: {
        //配置tabBar
        tabBar:{
            "color": "#7f8389",
            "selectedColor": "#329fff",
            "backgroundColor": "#f7f7fa",
            "borderStyle": "#ccc",
            "position": "bottom",
            "list": [
                {
                    "pagePath": "/pages/index/index",
                    "text": "首页",
                    "iconPath": "/images/icons/home_1.png",
                    "selectedIconPath": "/images/icons/home_2.png",
                    "selectedColor": "#329fff",
                    "active": false
                },
                {
                    "pagePath": "/pages/apply/apply",
                    "text": "报名",
                    "iconPath": "/images/icons/apply_1.png",
                    "selectedIconPath": "/images/icons/apply_2.png",
                    "selectedColor": "#329fff",
                    "active": false
                },
                {
                    "pagePath": "/pages/user/user",
                    "text": "我的",
                    "iconPath": "/images/icons/user_1.png",
                    "selectedIconPath": "/images/icons/user_2.png",
                    "selectedColor": "#329fff",
                    "active": false
                }
            ]
        },
       
    },
    //修改tabBar的active值  
    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;//根据页面地址设置当前页面状态  
            }
        }
        _curPage.setData({
            tabBar: tabBar
        });
    },
});

 

4、index.wxml引入模板

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

5、index.js页面使用：

//获取应用实例
var app = getApp();
Page({
  data: {
  }
  onLoad: function () {
    app.editTabBar();//添加tabBar数据  
   
})