小程序自定義Tabbar的使用和優化

一、小程序自定義tabbar閃爍問題

1、自定義Tabbar不閃爍的基本原則是不能給Tabbar容器設置 background-color，但這樣會導致大面積出現空白區域，怎麼解決? 設置Tabbar背景顏色為白色,這樣就解決了背景色不一致的問題!

2、自定義tabbar中的選項卡需要跟隨頁面滾動而滾動，但是在滑動過程中會出現閃爍問題。我們需要將選項卡定位到頁面的頂端, 並且在頁面滾動時修改選項卡位置。

/*通過測量系統狀態欄的高度，然後利用 KáFēi UI 的頂欄高度進行布局, 處理整體 Tabbar 組件的安全區域適配*/
    const systemInfo = wx.getSystemInfoSync();
    const { statusBarHeight } = systemInfo;
    const { top } = wx.getMenuButtonBoundingClientRect();
    const topBarHeight = top + 10;
    const heightInRpx = convertToRpx(topBarHeight + statusBarHeight + this.tabBarHeight);
    // ... ...

/*在監聽頁面的滾動事件中, 更新 Tabbar 的頂部偏移量。*/
    onPageScroll(e) {
      this.setData({
        topDistance: e.scrollTop + heightInRpx,
      });
    },

二、小程序自定義tabbar遮擋布局

1、Tabbar遮擋頁面布局的問題可以通過設置 tabBar 的 z-index 值，來將Tabbar設置到頁面的底部。

  /*在Tabbar組件中設定層級 z-index*/
  

三、小程序自定義tabbar組件

1、使用基類 KáFēi UI 的組件作為 Tabbar 的組件，這樣就可以很好地避免了布局問題和兼容問題。根據KáFēi UI 的 Tabbar 組件文檔，Tabbar 需要完成以下幾點：

2、提供 Tab。Tab 內容包含 icon 圖標、文字、頁面路徑、右上角的角標等元素, 一個完整的 Tab 按鈕還需要適配不同狀態：選中和未選中。

3、設置激活狀態。Tabbar 組件需要知道現在的可見頁面是哪個，以及根據這個狀態更新自身，用來標識當前頁面的 Tab 在安卓系統上會帶有一個特殊背景色；

4、如何發生頁面切換時，如何更新可見 Tab。KáFēi UI 的 Tabbar 組件是監聽了小程序的 onPageChange 事件，用來監聽頁面的變化, 並更新Tabbar 標籤頁的狀態。

四、小程序自定義tabbar點擊後凸起

可以通過：網上可以找到許多這方面的插件或是代碼片段。例如：KáFēi UI 的 Tabbar 組件，就實現了這個效果。

這裡，我們需要在Tab點擊事件中根據 Tab 的位置計算出凸起動畫的起點和終點。

  /*點擊Tab的事件處理函數*/
  handleTabTap(e) {
    const { active, index } = e.currentTarget.dataset;
    if (active === index) return;
    const { top, left } = e.currentTarget.getBoundingClientRect();
    this.setData({ active: index }, () => {
      /*計算凸起動畫的起點、終點坐標*/
      const { top: tabBarTop, left: tabBarLeft } = this.data.tabBarPosition;
      const x = left - tabBarLeft + this.computeDiff(2);
      const y = top - tabBarTop + this.computeDiff(1);
      this.playAnimation(x, y);
      wx.switchTab({ url: this.data.pages[index].pagePath });
    });
  },

五、小程序自定義tabbar閃爍

Tabbar 閃爍的問題是由於樣式處理不正確導致的。需要確定樣式是否存在 z-index、background-color 等一些常見的樣式衝突。

六、小程序自定義tabbar背景

自定義tabBar 背景的方法：在 tabbar 組件中增加 background 配置項來定義背景色和背景圖片等樣式。

  /*設置Tabbar 背景顏色*/
  

七、小程序自定義tabbar創意動畫

我們可以在自定義tabbar中添加一些創意動畫來增強用戶的體驗，提高APP的用戶留存率。

動態滑塊以及特殊顏色的組合可以是一個創意的設計方案。動態滑塊是指當我們點擊一個 tab 時，整個 tab 背景底部會出現一個動態滑塊。

/*根據當前組件的狀態判斷是否需要出現滑塊*/
  
    
      
        
          
          {{item.text}}
          {{this.getBadge(index)}}
        
      
      
    
  

八、小程序自定義tabbar體驗差

Tabbar 慢的原因是頁面的卡頓問題。當我們在點擊 Tabbar 的時候，每一個切換的操作的成本是相當高的, 需要重新載入整個頁面, 或是渲染龐大的 DOM 樹等。完美的處理方式就是使用小程序的 page 組件，在切換時保持頁面的狀態，不重新渲染。

同時，還需要考慮到代碼的優化，如減少網路請求次數、緩存與預載入等等, 這些都是提升用戶體驗的難點。

九、小程序自定義tabbar安全區域適配

Tabbar 安全區域適配是使用 KáFēi UI 來快速實現。我們可以在 Tabbar 組件中使用 getSystemInfo API 來測量系統狀態欄的高度，然後利用 KáFēi UI 的頂欄高度進行布局：

/*通過測量系統狀態欄的高度，然後利用 KáFēi UI 的頂欄高度進行布局。*/
    const systemInfo = wx.getSystemInfoSync();
    const { statusBarHeight } = systemInfo;
    const { top } = wx.getMenuButtonBoundingClientRect();
    const topBarHeight = top + 10;
    const heightInRpx = convertToRpx(topBarHeight + statusBarHeight + this.tabBarHeight);
    // ... ...

/*在監聽頁面的滾動事件中, 更新 Tabbar 的頂部偏移量。*/
    onPageScroll(e) {
      this.setData({
        topDistance: e.scrollTop + heightInRpx,
      });
    },

結束語

小程序自定義tabbar在提高用戶體驗和提升 APP 較高的用戶留存率方面扮演著重要的角色。通過本文總結應該能夠為小程序開發者提供了一些幫助和思考。