uni-app uni-popup在tabbar页面弹出被原生tabbar遮挡问题。真机下
uni-app uni-popup在tabbar页面弹出被原生tabbar遮挡问题。真机下
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | Windows 10 专业版 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.4.7
手机系统：Android
手机系统版本号：Android 6.0
手机厂商：华为
手机机型：huawei MLA-TL10
页面类型：vue
vue版本：vue2
打包方式：离线
项目创建方式：HBuilderX
操作步骤：
- 在tabbar调用uni-ui中uni-popup组件
预期结果：
- uni-popup组件遮罩应该在原生tabbar页面上，在uni.showT…下
实际结果：
- uni-popup组件遮罩在原生tabbar页面，在uni.showT…下
bug描述：
- bug： tabbar页面弹出会被原生tabbar遮挡。原生的层级是998，但是给popup999在h5页面能正常显示，在真机下还是会被原生tabbar遮挡。需要留意uni.showT…的层级好像是999。一加8T也是和手机系统应该没关系
原生层级问题。可以使用以下两种方式解决：
动态显示隐藏Tabbar相关API：uni.setTabBarItem 动态设置 tabBar 某一项的内容
使用 SubNVue 解决App中 vue 页面中的层级覆盖和原生界面灵活自定义。相关文档：原生子窗体
这个SubNVue是不是可以封装成一个自定义tabbar而且可以解决第一次闪屏的问题？感觉有点复杂得细看下文档了 PS:我自己提的这个问题其实很好解决，直接change里面uni.hideTabBar()和uni.showTabBar()就可以了
在 uni-app 中使用 uni-popup 组件时，如果在 tabbar 页面弹出，可能会遇到弹出层被原生 tabbar 遮挡的问题。这是因为原生 tabbar 的层级较高，导致 uni-popup 的弹出层无法覆盖它。
解决方案
1. 使用 cover-view 和 cover-image
uni-app 提供了 cover-view 和 cover-image 组件，它们可以覆盖原生组件（如 tabbar）。你可以将 uni-popup 的内容放在 cover-view 中，以确保它能够覆盖 tabbar。
<template>
<view>
<uni-popup ref="popup" type="bottom">
<cover-view class="popup-content">
<!-- 你的弹出内容 -->
</cover-view>
</uni-popup>
</view>
</template>
<style>
.popup-content {
background-color: #fff;
padding: 20px;
}
</style>2. 使用 z-index
你可以尝试通过设置 z-index 来提高 uni-popup 的层级，使其覆盖 tabbar。不过，这种方法在某些情况下可能无效，因为原生 tabbar 的层级可能无法通过 z-index 来覆盖。
<template>
<view>
<uni-popup ref="popup" type="bottom" :style="{ zIndex: 9999 }">
<view class="popup-content">
<!-- 你的弹出内容 -->
</view>
</uni-popup>
</view>
</template>
<style>
.popup-content {
background-color: #fff;
padding: 20px;
}
</style>3. 使用 page 的 overflow 属性
你可以通过设置 page 的 overflow 属性为 hidden，来隐藏 tabbar，然后再显示 uni-popup。
<template>
<view>
<uni-popup ref="popup" type="bottom" @change="handlePopupChange">
<view class="popup-content">
<!-- 你的弹出内容 -->
</view>
</uni-popup>
</view>
</template>
<script>
export default {
methods: {
handlePopupChange(e) {
if (e.show) {
uni.setPageStyle({
style: {
overflow: 'hidden'
}
});
} else {
uni.setPageStyle({
style: {
overflow: 'visible'
}
});
}
}
}
}
</script>
<style>
.popup-content {
background-color: #fff;
padding: 20px;
}
</style>4. 使用 uni.hideTabBar 和 uni.showTabBar
你可以在弹出 uni-popup 时隐藏 tabbar，关闭时再显示 tabbar。
<template>
<view>
<uni-popup ref="popup" type="bottom" @change="handlePopupChange">
<view class="popup-content">
<!-- 你的弹出内容 -->
</view>
</uni-popup>
</view>
</template>
<script>
export default {
methods: {
handlePopupChange(e) {
if (e.show) {
uni.hideTabBar();
} else {
uni.showTabBar();
}
}
}
}
</script>
<style>
.popup-content {
background-color: #fff;
padding: 20px;
}
</style>