uni-app components页面层级要比新建的页面层级高 显示失效了
uni-app components页面层级要比新建的页面层级高 显示失效了
操作步骤:
- a页面引用components里面的功能块uni-goods-nav,打开新建的B页面NVUE,但是还是显示A页面的模块。
预期结果:
- 不显示A页面的uni-goods-nav。
实际结果:
- 显示
bug描述:
底部的内容是单独写在components里调用的,然后切换到新页面的时候,前面一个页面的内容A还会在A里面显示,也就是B页面无法遮盖A页面的内容~
信息项 | 内容 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | I7-9750H |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 3.1.4 |
手机系统 | Android |
手机系统版本号 | Android 11 |
手机厂商 | 小米 |
手机机型 | 黑鲨1 |
页面类型 | nvue |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
更多关于uni-app components页面层级要比新建的页面层级高 显示失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html
没人负责吗?
更多关于uni-app components页面层级要比新建的页面层级高 显示失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html
已经有了,莫慌
有人吗?
目前已经确认 subnvue 的层级比较高,后续会进行调整
临时解决办法:这个俩悬浮按钮改用普通组件实现,或者切换页面时隐藏 subnvue
谢谢,希望尽快调整一下。
回复 我不是大v: 目前不会太快调整,因为有部分人依赖了subNvue 层级高的特性做跨页面弹窗,需要考虑一下兼容问题。
这是一个常见的页面层级问题,在uni-app的nvue页面中尤为明显。问题根源在于nvue页面默认使用原生渲染,其层级结构与普通vue页面不同。
当A页面引用的组件在切换到B页面后仍然显示,通常是因为:
- 组件使用了
position: fixed
定位且z-index设置过高 - nvue页面的层级管理机制导致
解决方案:
方案一:调整组件定位和z-index 检查uni-goods-nav组件的样式,如果是fixed定位,在离开A页面时应该隐藏:
// A页面
onHide() {
this.showGoodsNav = false
},
onShow() {
this.showGoodsNav = true
}
方案二:使用条件渲染 在A页面使用v-if控制组件显示:
<uni-goods-nav v-if="pageVisible" />
data() {
return {
pageVisible: true
}
},
onHide() {
this.pageVisible = false
},
onShow() {
this.pageVisible = true
}
方案三:检查页面栈管理 确保使用正确的页面跳转方式:
// 使用navigateTo而不是redirectTo
uni.navigateTo({
url: '/pages/B'
})
方案四:调整nvue页面配置 在pages.json中为B页面配置更高的层级:
{
"path": "pages/B",
"style": {
"app-plus": {
"titleNView": false,
"animationType": "pop-in"
}
}
}