實現自定義的小程序底部tabbar

————————2019/1/29 更新————————

基礎庫2.5.0更新 支持自定義tabBar

—————————窮———窮——————————

背景

誒，固然是爲了實現更有溫度的代碼啦（背後設計師拿着刀對着我）

自帶tabbar

app.json中配置：

tabBar: {
  backgroundColor: '#fff',
  borderStyle: 'white',
  color: '#333',
  selectedColor: '#333',
  list: [
    {
      pagePath: 'pages/index',
      text: '活動首頁',
      iconPath: 'resource/images/home.png',
      selectedIconPath: 'resource/images/home-active.png'
    },
    {
      pagePath: 'pages/my',
      text: '個人',
      iconPath: 'resource/images/my.png',
      selectedIconPath: 'resource/images/my-active.png'
    }
  ]
}

誕生了這個，圖標尺寸81*81，不支持svg跟字體圖標。

設計師看了想砍人系列

自定義tabbar

剛開始的實現思路：

不配置原生tabbar，採用了navigateTo跟navagateBack

【圖片如侵刪】
雖然達到了自定義樣式的效果，可是有兩個缺點：只是單純的導航，失去tab效果；超過兩個tab就難了。

過了一段時間，吃飯的時候猛地想到如下思路：

配置原生tabbar，也編寫自定義tabbar，以下：

自定義tabbar使用wx.switchTab切換，但onLoad時使用wx.hideTabBar()隱藏掉原生款。bingo！
如今既繼承了原生tab的效果，又能夠使用字體圖標跟svg，還能夠加些有溫度的小玩意。

最後

mark一個小問題：同時使用wx.showToast跟下拉刷新wx.startPullDownRefresh會致使下拉刷新的三點動畫異常，-_-||還覺得是被我倆個tabbar撐到了。