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

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

      最近做了幾個小程式專案,幾乎每個專案中都會用到小程式的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的實現,問題很簡單,程式碼量也不多,但是也確確實實讓我卡了兩天進度。不過這也讓我明白瞭解決問題的思路其實比程式碼的實現更重要,如果方向不合適,再多的工作量也是事倍功半甚至南轅北轍。

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

      

        

相關文章