微信小程序 自定義tabbar實例

在小程序的開發文檔中，對tabbar是這樣說明的：

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip：

1. 當設置 position 為 top 時，將不會顯示 icon

2. tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

在實際開發過程中，小程序自帶的tabbar樣式並不能滿足設計提供的開發需求，所以需要我們自定義一套屬於自己的tabbar。

需求如下圖：

 

新建template.wxml

<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
        <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
            <navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; " open-type="redirect">
                <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
                <text style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}">{{item.text}}</text>
            </navigator>
        </block>
    </view>
</template>

app.wxss里定義組件樣式

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    border-top: 1rpx solid #d7d7d7; 
}

.tabbar_nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    height: 100%;
}

.tabbar_icon{
    width: 50rpx;
    height:50rpx;
}

.tabbar_nav:nth-child(2) image{ 
    position:relative;
    top:-32rpx;
    width:80rpx;
    height:80rpx;
}
.tabbar_nav:nth-child(2) text{  
    position:relative; 
    top:-32rpx;
}

app.js里面進行tabBar的參數配置；

默認第一個選中；然后封裝一個函數，方便需要用到的頁面調用

//app.js
App({
  tabbar: {
    color: "#242424",
    selectedColor: "#fa8582",
    backgroundColor: "#ffffff",
    borderStyle: "#d7d7d7",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首頁",
        iconPath: "../../assets/images/tab1.png",
        selectedIconPath: "../../assets/images/tab1_cur.png",
        selected: true
      },
      {
        pagePath: "/pages/fabu/fabu",
        text: "發布",
        iconPath: "../../assets/images/tab_new.png",
        selectedIconPath: "../../assets/images/tab_new.png",
        selected: false
      },
      {
        pagePath: "/pages/user/user",
        text: "我的",
        iconPath: "../../assets/images/tab4.png",
        selectedIconPath: "../../assets/images/tab4_cur.png",
        selected: false
      }
    ],
    position: "bottom"
  }, 
  changeTabBar: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1]; 
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.tabbar; 
    for (var i = 0; i < tabBar.list.length; i++) {
      console.log(_pagePath + '--' + tabBar.list[i].pagePath)
      tabBar.list[i].selected = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].selected = true;//根據頁面地址設置當前頁面狀態  
      }
    }
    _curPage.setData({
      tabbar: tabBar
    });
  },  
})

在這里，getCurrentPages()方法，用來獲取頁面page對象，執行非當前頁js里的方法，打印查看一目了然

下面就是調用了，每個配置在tabbar中的頁面都要，因為這個是頁面跳轉了

在wxml引入創建的模板並使用

 

<import src="../template/template.wxml" />
<template is="tabbar" data="{{tabbar}}"/>

 

在js中調用函數

 

 

const app = getApp();

Page({
  data: {
    tabbar: {},
  },
  onLoad: function (options){
     //調用app中的函數
    app.changeTabBar(); 
  },
})

 

到這里就完成啦！因為是navigator的頁面跳轉，頁面跳轉的時候會閃一下，不過不影響使用。有小伙伴想到了怎么阻止閃的問題，隨時歡迎在這里留言，相互學習，相互進步，謝謝！