微信小程序自定義組件-自定義底部菜單欄(tabbar)

在做小程序開發的時候，客戶給出一個底部菜單欄的效果圖，要求中間的一個菜單呈圓形突出，也就是下面的效果：

小程序的原生的tabbar是不行了，我就自己寫了一個tabbar的組件。

前言：

目前還存在一些問題待完善，例如跳轉未加載過的頁面時閃爍的問題。

配置：

首先是開啓自定義tabbar設置： app.json->"custom": true，這裏爲了方便我就直接在app.json裏面全局聲明瞭該組件：

//app.json

"usingComponents": {
     "rwj-tabbar": "components/rwj-tabbar/index"
}

代碼：

組件js:

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

  /**
   * 組件的初始數據
   */
  data: {
    tabbarHeight: "100",
    active: 0
  },

  // 在組件實例進入頁面節點樹時執行
  attached: function () {
    this.setData({
      active: this.data.pageActive
    })
  },
  // 在組件實例被從頁面節點樹移除時執行
  detached: function () {
    
  },
  /**
   * 組件的方法列表
   */
  methods: {
    //頁面跳轉
    switchJump: function(e){
      let url = e.currentTarget.dataset.url;
      wx.switchTab({
        url: url,
      })
    }
  }
})

組件wxml：

<!--components/rwj-tabbar/index.wxml-->
<view class="tabbar-container">
  <view class="tabbar-item {{active==0? 'tabbar-select':''}}" bindtap="switchJump" data-url="../index/index">
    <view class="tabbar-image" data-active="0">
      <image src="{{active==0? '../../images/label_home_01.png':'../../images/label_home_02.png'}}"></image>
    </view>
    <view class="tabbar-text">首頁</view>
  </view>
  <view class="tabbar-item {{active==1? 'tabbar-select':''}}" bindtap="switchJump" data-url="../borrowingRecords/index" data-active="1">
    <view class="tabbar-image">
      <image src="{{active==1? '../../images/label_record_01.png':'../../images/label_record_02.png'}}"></image>
    </view>
    <view class="tabbar-text">借書記錄</view>
  </view>
  <view class="tabbar-item tabbar-center {{active==2? 'tabbar-select':''}}" bindtap="switchJump" data-url="../address/disMap" data-active="2">
    <view class="mask-item">
      <view class="mask-border"></view>
    </view>
    <view class="item-center">
      <view class="tabbar-image">
        <image  src="{{active==2? '../../images/label_bookcase_01.png':'../../images/label_bookcase_02.png'}}"></image>
      </view>
      <view class="tabbar-text">附近書櫃</view>
    </view>
  </view>
  <view class="tabbar-item {{active==3? 'tabbar-select':''}}" bindtap="switchJump" data-url="../coinRecord/index" data-active="3">
    <view class="tabbar-image">
      <image  src="{{active==3? '../../images/label_xxb_01.png':'../../images/label_xxb_02.png'}}"></image>
    </view>
    <view class="tabbar-text">小象幣</view>
  </view>
  <view class="tabbar-item {{active==4? 'tabbar-select':''}}" bindtap="switchJump" data-url="../myCenter/index" data-active="4">
    <view class="tabbar-image">
      <image  src="{{active==4? '../../images/label_my_01.png':'../../images/label_my_02.png'}}"></image>
    </view>
    <view class="tabbar-text">我的</view>
  </view>
</view>

組件wxss:

/* components/rwj-tabbar/index.wxss */
view,cover-view,cover-image{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.tabbar-container{
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  align-items: flex-end;
  border-top: 1rpx solid #e6e6e6;
}
.tabbar-container .tabbar-select{
  color: #298acb;
}
.tabbar-item{
  width: 20%;
  height: 100rpx;
  color: #71c6ff;
  padding: 10rpx 0rpx;
  background-color: #fff;
  border-top: 1rpx solid #e6e6e6;
}
.tabbar-item .tabbar-image{
  width: 100%;
  height: 50rpx;
  display: flex;
  justify-content: center;
  position: relative;
}
.tabbar-item .tabbar-image image{
  width: 50rpx;
  height: 50rpx;
}
.tabbar-item .tabbar-text{
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 26rpx;
  text-align: center;
}

.tabbar-center{
  height: 150rpx;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: relative;
}
.tabbar-center .mask-item{
  width: 100%;
  height: 50rpx;
  overflow: hidden;
  position: relative;
}
.tabbar-center .mask-item .mask-border{
  width: 120rpx;
  height: 120rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: calc(50% - 60rpx);
}
.tabbar-center .item-center{
  width: 100%;
  height: 100rpx;
}
.tabbar-center .item-center .tabbar-image{
  position: absolute;
  top: 2rpx;
  left: calc(50% - 58rpx);
  width: 116rpx;
  height: 116rpx;
  padding: 5rpx;
  background-color: #fff;
  border-radius: 50%;
}
.tabbar-center .item-center .tabbar-text{
  position: absolute;
  bottom: 10rpx;
  left: 0rpx;
  width: 100%;
}
.tabbar-center .item-center .tabbar-image image{
  width: 100%;
  height: 100%;
}

父組件調用：

<rwj-tabbar page-active="{{pageNum}}"></rwj-tabbar>