微信小程序自定义tabBar详细教程，且自适应尺寸和实现高斯模糊版_前端小程序怎么设置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、根目录app.js 创建全局变量

这里全局变量的作用是为了自定义tab-bar的索引能够自动分配给list中的json页面

// app.js
App({
  onLaunch() {
        //获取系统信息
        wx.getSystemInfo({
            success: res => {
            this.system = res
            }
        })
        //获取胶囊信息
        this.menu = wx.getMenuButtonBoundingClientRect();
  },
  globalData: {
      tabBarIndex:0
  }
  
})

 3、根目录新建文件夹

必须是 “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;
          app.globalData.tabBarIndex=index;
          wx.switchTab({
            url: page,
          })
      }
  }
})

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

4、page 索引页面代码(必须)

例如：我的

在需要跳转的页面当中加入下面代码，否则tabBar不生效。微信自定义tabBar必须的方式

js代码中需要加入该函数，select 根据索引属性获取全局变量值就行

const app = getApp() //这段代码需要放在page页面JS的最顶部
/**
   * 生命周期函数--监听页面显示
   */
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        // 根据全局变量获取tab的索引顺序，
        select: app.globalData.tabBarIndex    
      }) 
    }
  },