快捷導(dǎo)航

微信小程序tabBar自定義彈窗遮擋不住解決技巧

更新時(shí)間：2022年11月30日 15:17:37 作者：就是那個(gè)小明

這篇文章主要為大家介紹了微信小程序tabBar自定義彈窗遮擋不住解決技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

最近開(kāi)發(fā)微信小程序發(fā)現(xiàn)一個(gè)問(wèn)題，就是微信小程序官方自帶的tabbar層級(jí)很高，自定義modal蓋不住tabbar的問(wèn)題；翻閱官方的社區(qū)，很多同學(xué)說(shuō) 設(shè)置z-index:99999；可以解決這個(gè)問(wèn)題，我實(shí)踐下來(lái)是有問(wèn)題的；ios是解決不了問(wèn)題；經(jīng)過(guò)反復(fù)實(shí)踐有兩種方法可以解決問(wèn)題；

方法一：自定義tabbar

這個(gè)方法就是完全放棄微信官方的tabbar；自己用SPA的方式去實(shí)現(xiàn)一個(gè)tabbar; 這個(gè)方法的優(yōu)點(diǎn)：

tabbar能自己定制化；順手也解決了蓋不住的問(wèn)題；
缺點(diǎn)在于：
要自己實(shí)現(xiàn)微信官方的實(shí)現(xiàn)的功能比如wx.switchTab等基礎(chǔ)功能
需要自己實(shí)現(xiàn)路由管理
需要比較大測(cè)試成本
整體實(shí)現(xiàn)成本還是比較大的，具體實(shí)現(xiàn)方法這里不做演示，感興趣的可以自行找相關(guān)的文章；社區(qū)有許多這個(gè)文章。

方法二：套用原生提供的tabbar自定義功能，嵌套自己的tabbar組件

具體實(shí)現(xiàn)方法如下：
第一步:開(kāi)啟原生的自定義tabbar功能：

// app.json加入以下代碼
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)"
      },
      {
        "pagePath": "pages/account/index",
        "text": "我的"
      }
    ]
  },

第二步:在根目錄創(chuàng)建空的tabbar

// custom-tab-bar/index.js
// custom-tab-bar/index.json
// custom-tab-bar/index.wxml
// custom-tab-bar/index.wxss
// index.wxml
  <view></view>
// index.js
  Component({});
// index.json
    {
      "component": true
    }

第三步：創(chuàng)建件自己的tabbar組件

// wxml
<view class="tab-bar__block"></view>
<view class="tab-bar">
  <view class="tab-bar__item {{ index == selected ? 'tab-bar__active' : '' }}" wx:for="{{list}}" wx:key="index" bind:tap="handleClick" data-index="{{ index }}" data-path="{{ item.pagePath }}">
    <icon icon="{{ index == selected ? item.currentIcon : item.icon }}" size="28px" />
    <view class="tab-bar__text">{{ item.text }}</view>
  </view>
</view>
// js
  methods: {
    /**
     * 點(diǎn)擊tab 切換
     * @param e event
     */
    handleClick(e: WechatMiniprogram.CustomEvent) {
      const { path, index } = e.currentTarget.dataset;
      const { list } = this.data;
      wx.switchTab({
        url: path,
      });
  },

第四步：使用頁(yè)面正常使用自己的tabbar組件

// wxml
<tab-bar selected="{{0}}" />
// json
{
  "usingComponents": {
    "tab-bar": "../../components/business/tab-bar"
  }
}

解決問(wèn)題方法大致思路就是這些，
方法的優(yōu)點(diǎn)是：能比較快速的解決遮擋不住的問(wèn)題;且支持原生小程序tabbar的大部分功能方法的缺點(diǎn)是：

page 生命周期 onTabItemTap 不可以觸發(fā)，需要自己實(shí)現(xiàn)
Icon 第一次切換會(huì)閃一下

總結(jié)

方法二相比方法一來(lái)說(shuō)；實(shí)現(xiàn)成本低的多，適合時(shí)間緊任務(wù)重的時(shí)候作為臨時(shí)的解決方案，但是，總體來(lái)說(shuō)還是比較hack的一種方式，如果有時(shí)間的話可以自己實(shí)現(xiàn)tabbar為上上策；順便吐槽一下，為啥官方社區(qū)都是說(shuō)用z-index解決，可是明顯不行啊