小程式踩坑之旅–動態設定tabBar

走不完的長巷發表於2019-03-04
tabBar

      最近做了幾個小程式專案，幾乎每個專案中都會用到小程式的tabBar。今天我們就一起來愉快的玩一下這個東西吧。

一.初與君相識

      我們先從最初的版本也是最簡單的版本開始吧。小程式的配置項裡已經幫我們準備了tabBar的一切，我們只需要按照文件中的格式在app.json中配置tabBar的內容就可以實現一個十分不錯的tabBar了。

tabBar: {
      list: [{
        pagePath: `pages/main/index`,
        text: `首頁`
      }, {
        pagePath: `pages/main/logs`,
        text: `日誌`
      }, {
        pagePath: `pages/main/test`,
        text: `測試`
      }]    
}複製程式碼

      沒錯，就這麼簡單，我們已經實現了一個tabBar了。而且我們還可以直接在配置項裡設定文字顏色，背景，圖示等等內容。這也太簡單了點吧，一點成就感都沒有?。

二.出師未捷身先死

      在我開開心心敲著程式碼的時候，萬惡的產品來了?。

      “現在我們要加一個角色，不同角色許可權功能不同，登入後底部的tab也不同。”

      “啊？！”

      “這對你來說很簡單吧？就是加個角色的判斷和做一些新頁面。”

      “你說什麼就是什麼吧?‍♂️?‍♂️”

      於是我再次點開了app.json。嗯？不對啊？app.json本身是一個靜態配置檔案，根本就不可能實現動態設定嘛。算了，這麼辣雞的東西，我自己來寫一個吧。

三.屋漏偏逢連夜雨

       既然官方提供的配置靠不住，還不如自己動手，豐衣足食。不就是一個tabBar元件嗎，隨便寫一寫樣式，用wx.reLaunch來做跳轉，so easy啊。想了想程式碼就還是不貼了，畢竟github或其他網站上有非常多現成的程式碼寫得可比我好多了，我的程式碼就不拿出來裝(diu)逼(ren)了。

      不管怎麼樣問題解決了，提交程式碼，收工回家吧，還可以和小姐姐一起吃個晚飯，豈不美哉？然而第二天一到公司，測試妹子笑眯眯的看著我，我本能地感覺到事情似乎沒那麼簡單。

      “你這個tab頁切換的時候怎麼老是會閃一下啊？”

      “額，這個…應該…不是…什麼大問題吧?”

      “可是別的小程式都沒有這個問題的呀，這個一直閃一直閃我的眼睛都要瞎掉了啦～～，小哥哥～～改一下嘛～～好不好嘛～～”

      。。。

四.柳暗花明又一村

      。。。

      沒錯我可恥的淪陷了，改吧。這絕對最後一次了，以後不可能再吃你這套！！(測試：上次你好像也是這麼說的喔～)

      算了，看來這個方案也不靠譜。那如果把幾個頁面合併到一個頁面上，用tab頁的形式切換，點選的時候只替換內容不跳轉頁面不久沒有閃爍的問題了嗎。說幹就幹，上程式碼！！

<template>
  <view>
    <!-- 每個tab頁的內容，如果頁面太大可以分離出去，這裡用簡單的view表示tab頁 -->
    <view wx:if="{{list[0].checked}}">首頁</view>
    <view wx:if="{{list[1].checked}}">日誌</view>
    <view wx:if="{{list[2].checked}}">測試</view>
    <!-- 底部tabBar -->
    <view class="bottom-tab">
      <repeat for="{{list}}" key="index" index="index" item="item">
        <view @tap="bindChange({{item}})" class="bottom-tab-inner">
          <view style="color: {{item.checked ? `#000000` : `#999`}}">{{item.text}}</view>        </view>      </repeat>    </view>  </view></template>

<script>
  import wepy from `wepy`
  export default class Index extends wepy.page {
    data = {
      list: [{
        text: `首頁`,
        checked: true
      }, {
        text: `日誌`,
        checked: false
      }, {
        text: `測試`,
        checked: false
      }]
    }
    methods = {
      bindChange (el) {
        this.list.forEach(item => {
          item.checked = (item.text === el.text)
        })
        this.$apply()
      }
    }
  }
</script>

<style lang="less" scoped>
  .bottom-tab{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88rpx;
    border-top: 1px solid #666;
    display: flex;
    &-inner{
      flex-grow: 1;
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>複製程式碼

      這樣在UI上就實現了小程式tabBar的基礎功能，而且可以在這個的基礎上加上各種自定義的內容，但是現在還有一個小問題，現在頁面切換的時候不能改變頂部導航條的文字。所以我們還需要呼叫一下wx.setNavigationBarTitle這個api，把bindChange稍作改動：

bindChange (el) {
  this.list.forEach(item => {
    item.checked = (item.text === el.text)
  })
  wepy.setNavigationBarTitle({title: el.text})
  this.$apply()
}複製程式碼

        大功告成！！！

總結

      文中涉及的東西很小，就只是一個tabBar的實現，問題很簡單，程式碼量也不多，但是也確確實實讓我卡了兩天進度。不過這也讓我明白瞭解決問題的思路其實比程式碼的實現更重要，如果方向不合適，再多的工作量也是事倍功半甚至南轅北轍。

      前端小白第一次寫文章，技術有限且文采一般，如果有看到錯誤或者不合理的地方，歡迎各位大佬幫忙指正。如果萬幸能幫到他人，也算是一種福分吧。

      

        

相關文章