【微信小程序自定义底部tabbar】

app.js

{
    
    "pages": [
        "pages/index/index",
        "pages/saleMng/saleMng",
        "pages/newsMng/newsMng",
        "pages/my/my"
    ],
    "tabBar": {
    
        "custom": true,
        "color": "#6b6c75",
        "selectedColor": "#FF3B3B",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
    
                "pagePath": "pages/index/index",
                "iconPath": "/img/icon/tabIcon1.png",
                "selectedIconPath":   "/img/icon/tabIcon1-.png",
                "text": "首页"
            },
            {
    
                "pagePath": "pages/saleMng/saleMng",
                "iconPath": "/img/icon/tabIcon2.png",
                "selectedIconPath":   "/img/icon/tabIcon2-.png",
                "text": "采销"
            },
            {
    
                "pagePath": "pages/newsMng/newsMng",
                "iconPath": "/img/icon/tabIcon4.png",
                "selectedIconPath":   "/img/icon/tabIcon4-.png",
                "text": "消息"
            },
            {
    
                "pagePath": "pages/my/my",
                "iconPath": "/img/icon/tabIcon5.png",
                "selectedIconPath":   "/img/icon/tabIcon5-.png",
                "text": "我的"
            }
        ]
    },
    "window": {
    
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}

custom-tab-bar/index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <!-- <view class="tab-bar-border"></view> -->
  <!--  -->

  <block wx:for="{
    {list}}" wx:key="index">
    <div wx:if="{
    {item.isSpecial == true}}" class="tabbar_nav" hover-class="none" style="color:{
    {tabbar.selectedColor}}" open-type="navigate">
      <view class='special-wrapper'>
        <image class="tabbar_icon" src="{
    {item.iconPath}}"></image>
      </view>
      <image class='special-text-wrapper'></image>
      <text>{
    {
    item.text}}</text>
    </div>

    <view wx:else class="tab-bar-item" data-path="{
    {item.pagePath}}" data-index="{
    {index}}" bindtap="switchTab">
      <!-- <view wx:for="{
    {list}}" wx:key="index" class="tab-bar-item" data-path="{
    {item.pagePath}}" data-index="{
    {index}}" bindtap="switchTab"> -->
      <image src="{
    {selected === index ? item.selectedIconPath : item.iconPath}}" class="tabIcon"></image>
      <view style="color: {
    {selected === index ? selectedColor : color}}">{
    {
    item.text}}</view>
    </view>
  </block>
</view>

custom-tab-bar/index.js

Component({
    
  data: {
    
    selected: 0,
    color: "#6b6c75",
    selectedColor: "#FF3B3B",
    list: [{
    
        pagePath: "/pages/index/index",
        iconPath: "/img/icon/tabIcon1.png",
        selectedIconPath: "/img/icon/tabIcon1-.png",
        text: "首页"
      },
      {
    
        pagePath: "/pages/saleMng/saleMng",
        iconPath: "/img/icon/tabIcon2.png",
        selectedIconPath: "/img/icon/tabIcon2-.png",
        text: "采销"
      },
      {
    
        // pagePath: "/pages/index1/index1",
        iconPath: "/img/icon/tabIcon3.png",
        isSpecial: true,
        text: ""
      },
      {
    
        pagePath: "/pages/newsMng/newsMng",
        iconPath: "/img/icon/tabIcon4.png",
        selectedIconPath: "/img/icon/tabIcon4-.png",
        text: "消息"
      },
      {
    
        pagePath: "/pages/my/my",
        iconPath: "/img/icon/tabIcon5.png",
        selectedIconPath: "/img/icon/tabIcon5-.png",
        text: "我的"
      }
    ]
  },
  attached() {
    },
  methods: {
    
    switchTab(e) {
    
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
    
        url
      })
      // this.setData({
    
      // selected: data.index
      // })
    }
  }
})

custom-tab-bar/index.json

{
    
  "component": true
}

custom-tab-bar/index.wxss

.tab-bar {
    
  font-size: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
    
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
    
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tabIcon {
    
  width:44rpx;
  height:44rpx;
  margin-bottom: 4rpx;
}






.tabbar_box {
    
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 98rpx;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.tabbar_box.iphoneX-height {
    
  padding-bottom: 66rpx;
}

.middle-wrapper {
    
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}

.middle-wrapper.iphoneX-height {
    
  bottom: 66rpx;
}

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

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

.special-wrapper {
    
  position: absolute;
  top: -28rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  /* border-top: 2rpx solid #f2f2f3; background-color: #fff; */
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}

.special-wrapper .tabbar_icon {
    
  width: 84rpx;
  height: 84rpx;
}

.special-text-wrapper {
    
  width: 56rpx;
  height: 56rpx;
}

关键的步骤：

在tabbar页面内的onshow里面：

 onShow: function () {
    
        if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
    
        this.getTabBar().setData({
    
          selected: 4
        })
      }
    },

selected: 4（对应的是下标顺序）

// pages/my/my.js
Page({
    

    /** * 页面的初始数据 */
    data: {
    

    },

    /** * 生命周期函数--监听页面加载 */
    onLoad: function (options) {
    

    },

    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady: function () {
    

    },

    /** * 生命周期函数--监听页面显示 */
    onShow: function () {
    
        if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
    
        this.getTabBar().setData({
    
          selected: 4
        })
      }
    },

    /** * 生命周期函数--监听页面隐藏 */
    onHide: function () {
    

    },

    /** * 生命周期函数--监听页面卸载 */
    onUnload: function () {
    

    },

    /** * 页面相关事件处理函数--监听用户下拉动作 */
    onPullDownRefresh: function () {
    

    },

    /** * 页面上拉触底事件的处理函数 */
    onReachBottom: function () {
    

    },

    /** * 用户点击右上角分享 */
    onShareAppMessage: function () {
    

    }
})