Detailed tutorial on customizing tabBar in WeChat applet, with adaptive size and Gaussian blur version

 iOS example:

 

 

Android example:

 Gaussian blur example:

1. Need to be configured in app.json

custom must be true

"tabBar": {
    "custom": true,
    "selectedColor": "#33a3dc",
    "list": [
      {
        "iconPath": "asset/imge/hu.png",
        "selectedIconPath": "asset/imge/hu-fill.png",
        "pagePath": "pages/index/index",
        "text": "心动"
      },
      {
        "iconPath": "asset/imge/per.png",
        "selectedIconPath": "asset/imge/per-fill.png",
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },

 2. Create a new folder in the root directory

Must be the name "custom-tab-bar"

custom-tab-bar/index, must be index

Then the code in the folder directory

WXML code:

<view class="tabbar">
    <view style="{
   
   {select==index&&index==0?'color: #ef3166;':''}}"
        class="tabbar-item {
   
   { select === index ? 'tabbar-select' : '' }}" wx:for="{
   
   { list }}" 
        wx:key="index"
        data-page="{
   
   { item.pagePath }}"
        data-index="{
   
   { index }}"
        bindtap="selectPage"
    >
        <block>
            <image class="tabbar-item-image"src="{
   
   { select === index ?  item.selectedIconPath : item.iconPath }}"></image>
            <text  class="tabbar-item-text">{
   
   { item.text }}</text>
        </block>
    </view>
</view>

 js code:

Component({
  data: {
      select: 0,
      list: [
          {
            iconPath: "/asset/imge/hu.png",
            selectedIconPath: "/asset/imge/hu-fill.png",
            pagePath: "/pages/index/index",
            text: "心动"
          },
         {
            iconPath: "/asset/imge/per.png",
            selectedIconPath: "/asset/imge/per-fill.png",
            pagePath: "/pages/my/my",
            text: "我的"
         }
      ]
  },
  methods: {
      selectPage(e) {
          const { page } = e.currentTarget.dataset;
          wx.switchTab({
            url: page,
          })
      }
  }
})

wxss code:

Gaussian blur code

backdrop-filter: blur(10px);

background-color: rgb(0 0 0 / .10);

.tabbar {
  width: 100%;
  display: flex;
  backdrop-filter: blur(10px);
  background-color: rgb(0 0 0 / .10);
  position: fixed;
  bottom: 0;
  padding-top: 10rpx;
  z-index: 9999;
  box-shadow: 0rpx -2rpx 20rpx 2rpx rgba(165,165,165,0.34);
  background-color: rgba(238, 238, 238, 0.89);
  padding-bottom:calc(10rpx + env(safe-area-inset-bottom) / 2);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #7c7c7c;
}

.tabbar-item-image {
  width: 50rpx;
  height: 50rpx;
}

.tabbar-item-text {
  font-size: 28rpx;
  margin-top: 1rpx;
}

.tabbar-select {
  color: #0a993a;
}

page index page code (required)

For example: my

Add the following code to the page that needs to be jumped, otherwise the tabBar will not take effect. The necessary way to customize tabBar in WeChat

This function needs to be added to the js code. Select just fill in the value according to the index attribute.

/**
   * 生命周期函数--监听页面显示
   */
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        // 根据tab的索引顺序是1
        select: 1    
      }) 
    }
  },