小程序如何實現自定義tabBar

背景

因爲微信默認的tabbar是官方組件，有最高的優先級，所以咱們本身組件的遮罩層沒法覆蓋他們。爲了解決這個問題，咱們能夠使用微信提供的自定義tabBar功能。
​

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
​

實現效果：
​

實現方式

1. 在項目根目錄下建立custom-tab-bar組件，文件名爲index，如圖

​

2. 在app.json中把tabBar設置爲自定義，這裏的list必需要定義，否者會報錯

​

3. 編寫tabbar代碼

​

wxml

<view class="bar">
  <view class="bar__item {{ index == selected ? 'bar__active' : '' }}" wx:for="{{list}}" wx:key="index" bind:tap="handleClick" data-index="{{ index }}" data-path="{{ item.pagePath }}">
    <image src="{{ index == selected ? item.selectedIconPath : item.iconPath }}" mode="aspectFit" class="bar__img" />
    <view class="bar__text">{{ item.text }}</view>
  </view>
</view>

js

Component({
  data: {
    selected: 0,
    list: [
      {
        "iconPath": "/static/tabbar/index.png",
        "selectedIconPath": "/static/tabbar/index2.png",
        "pagePath": "/pages/index/index",
        "text": "首頁"
      },
      {
        "iconPath": "/static/tabbar/activity.png",
        "selectedIconPath": "/static/tabbar/activity2.png",
        "pagePath": "/pages/find/find",
        "text": "活動"
      },
      {
        "iconPath": "/static/tabbar/mall.png",
        "selectedIconPath": "/static/tabbar/mall2.png",
        "pagePath": "/pages/pageConfig/configIndex",
        "text": "商城"
      },
      {
        "iconPath": "/static/tabbar/my.png",
        "selectedIconPath": "/static/tabbar/my2.png",
        "pagePath": "/pages/my/my",
        "text": "個人"
      }
    ]
  },

  methods: {
    handleClick(e) {
      let path = e.currentTarget.dataset.path;
      let index = e.currentTarget.dataset.index;
      wx.switchTab({ url: path })
      this.setData({ selected: index })
    }
  }
});

wxss
特別說明：自定義的tabbar層級默認爲9999（非官方說明，本身測出的結果），我這裏使用的less，會編譯爲wxss。

.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }
  &__text {
    font-size: 10px;
  }

  &__active {
    .bar__text {
      color: #487271;
    }
  }
}

json

{
  "component": true,
  "usingComponents": {}
}

完成上面的步驟，tarbar組件就寫完了，接下來是使用了
​

使用自定義tabBar

這個組件不須要手動註冊，在list中定義的頁面會自動加載這個組件。可是須要經過下面的方法手動指定高亮的選項：
​

// 建議在onShow方法中調用，selected 值爲索引值
onShow() {
  this.getTabBar().setData({ selected: 0 })
}

處理padding值

因爲使用了自定義tabbar，所以須要對使用tababr的頁面設置下內邊距，以防止內容被覆蓋。能夠在app.wxss中定義一個全局樣式，而後在對應的頁面添加這個類名便可。
​

.global__fix_tabbar {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

​

最終效果

咱們的小程序使用vant-weapp組件庫，對於popup組件，設置更高的層級，就能夠覆蓋tabbar了
​

<!-- z-index="99999" -->
<van-popup
  show="{{ showPhone }}"
  round
  custom-class="custom"
  z-index="99999"
  position="bottom"
  bind:click-overlay="onClosePhone"
  catchtouchmove="ture"
>
 </van-popup>

效果如圖：
​