實現自定義的小程序底部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撐到了。