微信小程序自定义tabBar详细教程，且自适应尺寸和实现高斯模糊版

进入下面小程序可以体验效果：

 

1、需要在app.json配置

custom 必须是true

PS：自定义tab-bar里面的JS中自定义的list 数量必须要和 app.json 中的list数量相同！！

"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、根目录新建文件夹

必须是 “custom-tab-bar” 这个名字

custom-tab-bar/index ，必须是index

然后该文件夹目录下的代码

WXML代码：

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

 js代码：

const app = getApp()
Component({
  data: {
      select: 0,
      list: [
          {
            iconPath: "/asset/imge/hu.png",
            selectedIconPath: "/asset/imge/hu-fill.png",
            pagePath: "/pages/index/index",
            text: "心动",
            textColor:"color:#ef3166;"
          },
         {
            iconPath: "/asset/imge/per.png",
            selectedIconPath: "/asset/imge/per-fill.png",
            pagePath: "/pages/my/my",
            text: "我的",
            textColor:"color:#0a993a;"
         }
      ]
  },
  methods: {
      selectPage(e) {
          const { page,index } = e.currentTarget.dataset;
          this.setData({select:index})
          wx.nextTick(()=>{
            wx.switchTab({
              url: page,
              complete:(res)=>{
                res['pagePath'] = page
                res['index'] = index
                this.triggerEvent('selectPage', res, {})
              }
            })
          })
      }
  }
})

wxss代码：

高斯模糊代码

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);
  pointer-events: auto; //skyline 模式必须使用，否则异常。skyline模式本身BUG
}

.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;
}