微信小程序自定義底部導航欄組件+跳轉

微信小程序原本封裝有底部導航欄，但對於想自定義樣式和方法的開發者來講，這並非很好。

參考連接：https://github.com/ljybill/miniprogram-utils/tree/master/custom-tabbar

首先建立一個底部導航欄組件，名爲：navBar

<view class='tabbar'>
  <view wx:if='{{_auth >= item.auth}}' class='tabbar-item' wx:for='{{tabbarList}}' wx:key='{{item.pagePath}}' bindtap='handleItemTap' data-path='{{item.pagePath}}' data-idx='{{index}}'>
    <view class='tabbar-item-icon'>
      <image src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'></image>
    </view>
    <view class='tabbar-item-text {{activeIdx === index ? "active" : ""}}'>{{item.text}}</view>
  </view>
</view>

導航欄樣式，分爲5個按鈕，中間爲圓形凸起

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  border-top: 0.5px solid #d5d5d5;
  display: flex;
  font-size: 0;
  background: #fff;
}
.tabbar-item {
  flex: 1;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8rpx 10rpx 0;
  color: #333333;
}

.tabbar-item:nth-child(3){
  position: relative;
  bottom: 50rpx;
  height:150rpx;
  flex: 0.7;
}

.tabbar-item:nth-child(3) .tabbar-item-icon{
  height: 100rpx;
  background: #fff;
  border-radius: 50%;
  border-top: solid 1px gray;
}

.tabbar-item:nth-child(3) .tabbar-item-icon image{
  width: 100rpx;
  height: 106rpx;
  padding-top: 6rpx;
}

.tabbar-item:nth-child(3) .tabbar-item-text{
  line-height: 0;
  font-size: 28rpx;
  margin-top: 8px;
  color: #808080;
}

.tabbar-item-icon {
  margin-bottom: 6rpx;
  height: 56rpx;
}

.tabbar-item-icon image {
  width: 56rpx;
  height: 56rpx;
}

.tabbar-item-text {
  font-size: 28rpx;
  line-height: 20rpx;
  color: #808080;
}
.active {
  color: #23ac38;
}

接下來在app.json中配置導航跳轉，因爲關於項目，路徑本身寫

"tabBar": {
    "color": "white",
    "borderStyle": "white",
    "backgroundColor": "white",
    "list": [
      {
        "pagePath": "跳轉路徑",
        "text": "首頁",
        "iconPath": "zh_tcwq/image/home.png",
        "selectedIconPath": "zh_tcwq/image/home_selected.png",
        "auth": 0
      },
      {
        "pagePath": "跳轉路徑",
        "text": "行業社區",
        "iconPath": "zh_tcwq/image/community.png",
        "selectedIconPath": "zh_tcwq/image/community_selected.png",
        "auth": 0
      },
      {
        "pagePath": "跳轉路徑",
        "text": "發現",
        "iconPath": "zh_tcwq/image/xbz_logo.png",
        "selectedIconPath": "zh_tcwq/image/close.png",
        "auth": 0
      },
      {
        "pagePath": "跳轉路徑",
        "text": "項目對接",
        "iconPath": "zh_tcwq/image/docking.png",
        "selectedIconPath": "zh_tcwq/image/docking_selected.png",
        "auth": 0
      },
      {
        "pagePath": "跳轉路徑",
        "text": "個人",
        "iconPath": "zh_tcwq/image/mine.png",
        "selectedIconPath": "zh_tcwq/image/mine_selected.png",
        "auth": 0
      }
    ]
  }

而後在app.js文件中把app.json配置的導航欄隱藏

onLaunch: function() {
    // 隱藏原生的tabbar
    wx.hideTabBar()
  },

因爲要自定義導航欄，因此要本身建立一個導航配置文件

在項目目錄下建立一個config文件夾，建立一個router.js的文件

module.exports = [
  {
    "pagePath": "跳轉路徑",
    "text": "首頁",
    "iconPath": "/zh_tcwq/image/home.png",
    "selectedIconPath": "/zh_tcwq/image/home_selected.png",
    "auth": 0
  },
  {
    "pagePath": "跳轉路徑",
    "text": "行業社區",
    "iconPath": "/zh_tcwq/image/community.png",
    "selectedIconPath": "/zh_tcwq/image/community_selected.png",
    "auth": 0
  },
  {
    "pagePath": "跳轉路徑",
    "text": "發現",
    "iconPath": "/zh_tcwq/image/xbz_logo.png",
    "selectedIconPath": "/zh_tcwq/image/close.png",
    "auth": 0
  },
  {
    "pagePath": "跳轉路徑",
    "text": "項目對接",
    "iconPath": "/zh_tcwq/image/docking.png",
    "selectedIconPath": "/zh_tcwq/image/docking_selected.png",
    "auth": 0
  },
  {
    "pagePath": "跳轉路徑",
    "text": "個人",
    "iconPath": "/zh_tcwq/image/mine.png",
    "selectedIconPath": "/zh_tcwq/image/mine_selected.png",
    "auth": 0
  }
]

接下來在導航欄組件中配置該導航按鈕參數

// zh_tcwq/pubcoms/navbar/navbar.js
import tabbarList from "../../../zh_tcwq/config/router.js"
Component({
  
  /**
   * 組件的屬性列表
   */
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    },
    auth: {
      type: Number,
      value: 0,
      observer: 'onAuthChanged'
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    tabbarList: tabbarList,
    _auth: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap(e) {
      const {
        idx,
        path
      } = e.currentTarget.dataset

      if (idx === this.data.activeIdx) {
        this.trigger('refresh')
        return
      }
      wx.switchTab({
        url: `/${path}`,
      })
    },
    onAuthChanged(newVal) {
      wx.setStorageSync('__com-tabbar-auth', newVal)
      this.setData({
        _auth: newVal
      })
    },
    trigger(eventName, value = {}, info) {
      if (!eventName) {
        throw new TypeError('沒有自定義事件名')
      }
      this.triggerEvent(eventName, value)
      console.log(`發送 ${eventName} 事件,攜帶的值爲 ${typeof value === 'object' ? JSON.stringify(value) : value} ${info ? '   ---   ' + info : ''}`) 
    }
  },
  ready() { },
  /** 權限顯示 */
  pageLifetimes: {
    show: function () {
      console.log('show')
      this.setData({
        _auth: wx.getStorageSync('__com-tabbar-auth')
      })
    }
  }
})

關於原做者點擊跳轉後沒法動態激活底部樣式的問題，我利用了一個小小的機智，經過組件間的參數傳遞，判斷該參數是否和頁面傳遞的參數一致，一致就顯示爲active狀態

例如：在index頁面下引用該組件：

先在json中配置組件：

{
  "usingComponents": {
    "tabbar":"../../../pubcoms/navbar/navbar"
  }
}

在wxml文件中引用

<!-- 底部導航欄--start -->

<tabbar activeIdx="{{activeIdx}}"></tabbar>

<!-- 底部導航欄--end -->

利用activeIdx來傳入導航欄組件中，在index.js中聲明該參數，由於個人index爲第一頁，全部我賦值的量爲0（數組顯示的規則是0,1,2,3,4，五個菜單）

每一個引用該組件的頁面都配置一下activeIdx，這樣在每次加載的時候組件會判斷兩個參數是否一致，若是一致，就添加active樣式。

不知道將的夠不夠清除，若是有問題的同窗能夠回覆提問。

效果圖以下，中間是一個圓形凸起的大logo