微信小程序 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數據  
   
})