微信小程序tabBar自定义弹窗遮挡不住解决技巧
作者：就是那个小明
这篇文章主要为大家介绍了微信小程序tabBar自定义弹窗遮挡不住解决技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
背景
最近开发微信小程序发现一个问题，就是微信小程序官方自带的tabbar层级很高，自定义modal盖不住tabbar的问题；翻阅官方的社区，很多同学说 设置z-index:99999；可以解决这个问题，我实践下来是有问题的；ios是解决不了问题；经过反复实践有两种方法可以解决问题；
方法一：自定义tabbar
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar; 这个方法的优点：
- tabbar能自己定制化；顺手也解决了盖不住的问题；
缺点在于： - 要自己实现微信官方的实现的功能比如wx.switchTab等基础功能
- 需要自己实现路由管理
- 需要比较大测试成本
整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。
方法二：套用原生提供的tabbar自定义功能，嵌套自己的tabbar组件
具体实现方法如下：
第一步:开启原生的自定义tabbar功能：
// app.json加入以下代码
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/account/index",
"text": "我的"
}
]
},
第二步:在根目录创建空的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
}
第三步：创建件自己的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"
}
}
解决问题方法大致思路就是这些，
方法的优点是：能比较快速的解决遮挡不住的问题;且支持原生小程序tabbar的大部分功能 方法的缺点是：
- page 生命周期 onTabItemTap 不可以触发，需要自己实现
- Icon 第一次切换会闪一下
总结
方法二相比方法一来说；实现成本低的多，适合时间紧任务重的时候作为临时的解决方案，但是，总体来说还是比较hack的一种方式，如果有时间的话可以自己实现tabbar为上上策；顺便吐槽一下，为啥官方社区都是说用z-index解决，可是明显不行啊
成果
以上就是微信小程序tabBar自定义弹窗挡不住解决技巧的详细内容，更多关于微信小程序tabBar弹窗的资料请关注脚本之家其它相关文章！