實現微信小程序底部tab欄自定義開發-封裝tabBar組件

小程序中因爲購物帶需要小圓點或者是加購件數的需求，需要自定義開發來滿足。

一.首先自定義一個組件tabbar

1.tabbar的wxml

<view class='tabbar'  wx:if="{{activeIdx!=0||!landingPage}}" style='padding-bottom:{{tabBarHeight}}rpx'>
  <view wx:if='{{_auth < item.auth}}' class='tabbar-item {{activeIdx === index ? "active" : ""}}' wx:for='{{tabbarList}}' wx:key='{{item.pagePath}}' bindtap='handleItemTap' data-path='{{item.pagePath}}' data-idx='{{index}}'>
    <view wx:if="{{index!==2}}">
      <view class='tabbar-item-icon'>
        <image class="tabbar-item-icon-img" src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'>
        </image>
      </view>
      <view class='tabbar-item-text'>{{item.text}}</view>
    </view>
    <view wx:else>
      <view class='tabbar-item-icon posrelative'>
        <view wx:if="{{cartNum}}" class="noStyle"></view>
        <image class="tabbar-item-icon-img" src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'>
        </image>
      </view>
      <view class='tabbar-item-text'>{{item.text}}</view>
    </view>
  </view>
</view>

2.tabbar的wxss

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  border-top: 0.5px solid #d5d5d5;
  display: flex;
  font-size: 0;
  background-color: #000;
}

.tabbar-item {
  flex: 1;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 17rpx 10rpx 17rpx;
  color: #616365;
}

.tabbar-item-icon {
  margin-bottom: 13rpx;
}

.tabbar-item-icon .tabbar-item-icon-img {
  width: 44rpx;
  height: 44rpx;
  position: relative;
}
.cover-view-tabbar-item-icon-img{
  left: 50%;
  transform: translateX(-50%);
}
.tabbar-item-text {
  font-size: 20rpx;
  letter-spacing: 2rpx;
  line-height: 21rpx;
}

.tabbar-item.active {
  color: #762322;
}

.carNum {
  position: absolute;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  font-size: 16rpx;
  text-indent: -4rpx;/*讓字體看起來居中*/
  top: 0;
  left: 0;
  line-height: 60rpx;
  text-align: center;
}
.noStyle{
  position: absolute;
  z-index: 10000;
  display: inline-block;
  width: 17rpx;
  background-color: #762322;
  color: #fff;
  border-radius:50%;
  height: 17rpx;
  line-height: 17rpx;
  margin-left: 32rpx;
  font-size: 17rpx;
  text-align: center
}

3.tabbar的js

// components/tabbar/index.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    tabbarList: [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "/icon/index.png",
        "selectedIconPath": "/icon/index-act.png",
        "auth": 1
      },
      {
        "pagePath": "pages/classifyIndex/classifyIndex",
        "text": "分類",
        "iconPath": "/icon/classify.png",
        "selectedIconPath": "/icon/classify-act.png",
        "auth":1
      },
      // {
      //   "pagePath": "pages/search/search",
      //   "text": "搜索",
      //   "iconPath": "/icon/search.png",
      //   "selectedIconPath": "/icon/search-act.png",
      //   "auth": 1
      // },
      {
        "pagePath": "pages/cart/cart",
        "text": "購物袋",
        "iconPath": "/icon/cart.png",
        "selectedIconPath": "/icon/cart-act.png",
        "auth":1
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/icon/mine.png",
        "selectedIconPath": "/icon/mine-act.png",
        "auth": 1
      }
    ],
    _auth: 0,
    tabBarHeight: getApp().globalData.tabBarHeight,
    cartNum:false
  },
  lifetimes: {
    attached: function () {
      getApp().getconfig(this);
    }
  },
  ready:function(){
    console.log(this.data.cartNum)
  },
  /**
   * 組件的方法列表
   */
  methods: {
    getconfig(e){
      this.setData({
        'tabbarList[2].auth': e.cartStatus
      })
    },
    handleItemTap(e) {
      const {
        idx,
        path
      } = e.currentTarget.dataset
      if (idx === this.data.activeIdx) return
      wx.switchTab({
        url: `/${path}`,
      })
    },
    showIcon(){
      this.setData({
        cartNum: wx.getStorageSync("currentAddCart").length == 0 ? false : true
      })
      console.log('cartNum', this.data.cartNum)
    }
  },
  //顯示購物袋中的showIcon
  pageLifetimes: {
    show: function () {
      this.showIcon();
    }
  }
})

二. 引用tab欄

1.app.json中需要保留tab欄的配置，tabBar在首頁，購物袋，我的，分類頁面都需要引用，所以我對組件的引用直接配置在app.json中了

2.在你需要的頁面中引入tabbar組件，比如首頁增加箭頭指的那句即可