微信小程序自定義tabBar在uni-app的適配詳解

 更新時間:2019年09月30日 11:35:22   作者:醉月思   我要評論
這篇文章主要介紹了微信小程序自定義tabBar在uni-app的適配詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
引言:此方法可用作大部分微信小程序支持,但uni-app文檔中卻找不到相關說明的API

需求

需要在微信小程序中,實現一個中間圖標突出顯示的異形導航欄。

如下圖

實現方法設計

要做這種異形的導航欄,用直接在配置文件里面寫list的方法肯定做不到。那么,就有以下兩種可替代方法。

  1. 在每一個頁面都加載一個tabBar組件,與頁面同時渲染。
  2. 設置自定義tabBar,修改tabBar的樣式。

優缺點分析:方法1實現起來略為簡單,但是會出現代碼可重用率低,降低性能,已經界面跳動等問題。方法2則是微信官方提供的,自定義方式,相信在性能方面也會有很大的優勢。故選擇方法2。

1. 查看文檔及官方Demo

官方文檔

簡要描述一下就是需要在根目錄中加入一個custom-tab-bar目錄,里面的文件結構與自定義組件的結構一致。然后再在小程序配置文件中修改tabbar為custom模式。

官方代碼

主要重點為三個部分

配置文件

custom-tab-bar目錄

頁面生命周期中的設置索引方法

這段代碼其實很容易理解,pageLifetimes就是監聽組件所在頁面的生命周期。上述代碼就是監聽頁面顯示。當頁面顯示后,獲取到tabBar的對象,然后再設置tabBar中的index索引。

2. 遷移到uni-app框架

上面的方法是使用微信小程序的開發方式,而我使用的是uni-app框架開發微信小程序的。所以我們需要把它們移植到uni-app框架內。

配置文件的修改

uni-app中,page.json被編譯為微信小程序的app.json。所以,我們直接修改page.json

custom-tab-bar目錄的適配

我們知道,uni-app使用的是類Vue開發,將一個Vue文件編譯為四個微信頁面文件(wxml,wxss,json,js)。那么,是否可以直接寫一個custom-tab-bar.vue的文件呢?剛開始我也是這么想的,后來發現uni-app只會編譯page目錄和component目錄下的vue文件。而微信小程序要求custom-tab-bar必須在項目的根目錄下。那么就只能在uni-app下創建一個custom-tab-bar目錄,并老老實實寫微信四件套了。

寫完后,uni-app會將該目錄完美的復制至微信小程序項目的根目錄。

tab頁面內的適配方法

這個在我實際開發中,是最令我頭痛的了。因為微信小程序的this引用與uni-app的this引用并不相同。所以如果直接復制代碼是會編譯出錯的。而另一個問題則是,uni-app并未提供pageLifetimes的事件監聽。

在我經過一番摸索之后,發現將設置索引方法寫在onShow事件里面,效果是等效的。接下來便只剩下this的問題了。

如果直接復制的話,會出現無任何效果的情況

因為uni-app的this引用不一樣,所以它在判斷getTabBar的時候,獲取的是“undefined”所以不會執行下面的操作。如果你將判斷去掉,則會直接報“undefined”錯誤。

難道實現不了?其實不然,萬變不離其宗。uni-app也是編譯到小程序的,所以絕對有跡可循。

我們首先看看uni-app里面this的內容。

我們可以很明顯的看到里面有個$mp的對象,說明這應該是微信小程序專用的對象。接下來我們繼續分析$mp

這里面有一個隱藏很深的getTabBar方法,我們直接調用它,和在微信小程序里面調用this.getTabBar是等效的。

所以我們就可以把onShow里面的內容寫成這樣。

一些優雅點的封裝

設置索引方法獨立出來

在methods對象中,添加

setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }

使用mixin避免重復書寫復制

main.js中,添加

Vue.mixin({
  methods:{
    setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }
  }
})

混入后的使用

在頁面文件中

onShow() {
      this.setTabBarIndex(0) //index為當前tab的索引
    }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • js無刷新操作table的行和列

    js無刷新操作table的行和列

    這篇文章主要介紹了js操作table的行和列,無刷新實現,需要的朋友可以參考下
    2014-03-03
  • JS實現自動變換的菜單效果代碼

    JS實現自動變換的菜單效果代碼

    這篇文章主要介紹了JS實現自動變換的菜單效果代碼,可實現自動變換菜單選中項的技巧,涉及JavaScript定時函數觸發頁面樣式屬性變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • 使用Three.js實現太陽系八大行星的自轉公轉示例代碼

    使用Three.js實現太陽系八大行星的自轉公轉示例代碼

    這篇文章主要給大家介紹了關于如何使用Three.js實現太陽系八大行星的自轉公轉的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Three.js具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-04-04
  • 使用js判斷TextBox控件值改變然后出發事件

    使用js判斷TextBox控件值改變然后出發事件

    這篇文章主要介紹了使用js判斷TextBox控件值改變然后出發事件。需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03
  • js判斷瀏覽器版本以及瀏覽器內核的方法

    js判斷瀏覽器版本以及瀏覽器內核的方法

    這篇文章主要介紹了js判斷瀏覽器版本以及瀏覽器內核的方法,可實現針對各個瀏覽器的判斷,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • 學習JavaScript編程語言的8張思維導圖分享

    學習JavaScript編程語言的8張思維導圖分享

    這篇文章主要介紹了學習JavaScript編程語言的8張思維導圖分享,本文給出了javascript變量、javascript運算符、javascript數組、javascript流程語句、javascript字符串函數、javascript函數基礎、javascript基礎DOM操作、javascript正則表達式的思維導圖,需要的可以參考下
    2015-03-03
  • tablesorter.js表格排序使用方法(支持中文排序)

    tablesorter.js表格排序使用方法(支持中文排序)

    這篇文章主要為大家詳細介紹了tablesorter.js表格排序使用方法,支持中文排序,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • 使用BootStrap實現用戶登錄界面UI

    使用BootStrap實現用戶登錄界面UI

    本文給大家介紹使用BootStrap實現用戶登錄界面UI,布局風格采用左右各一半的風格設計,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧
    2016-08-08
  • 微信小程序如何使用globalData的方法

    微信小程序如何使用globalData的方法

    這篇文章主要介紹了微信小程序如何使用globalData的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • javascript中UMD規范的代碼推演

    javascript中UMD規范的代碼推演

    這篇文章給大家分享了javascript中UMD規范的代碼推演的相關的知識點內容,有興趣的朋友們學習下。
    2018-08-08

最新評論

北京pk赛车人工计划软件手机版