欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年11月30日 15:17:37   作者：就是那個小明  
這篇文章主要為大家介紹了微信小程序tabBar自定義彈窗遮擋不住解決技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

背景

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

方法一：自定義tabbar

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

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

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

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

// app.json加入以下代碼
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "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: {
    /**
     * 點擊tab 切換
     * @param e event
     */
    handleClick(e: WechatMiniprogram.CustomEvent) {
      const { path, index } = e.currentTarget.dataset;
      const { list } = this.data;
      wx.switchTab({
        url: path,
      });
  },

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

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

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

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

總結(jié)

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

成果

以上就是微信小程序tabBar自定義彈窗擋不住解決技巧的詳細內(nèi)容，更多關(guān)于微信小程序tabBar彈窗的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論