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

image


更多关于uni-app components页面层级要比新建的页面层级高 显示失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

没人负责吗?

更多关于uni-app components页面层级要比新建的页面层级高 显示失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经有了,莫慌

有人吗?

目前已经确认 subnvue 的层级比较高,后续会进行调整
临时解决办法:这个俩悬浮按钮改用普通组件实现,或者切换页面时隐藏 subnvue

谢谢,希望尽快调整一下。

回复 我不是大v: 目前不会太快调整,因为有部分人依赖了subNvue 层级高的特性做跨页面弹窗,需要考虑一下兼容问题。

这是一个常见的页面层级问题,在uni-app的nvue页面中尤为明显。问题根源在于nvue页面默认使用原生渲染,其层级结构与普通vue页面不同。

当A页面引用的组件在切换到B页面后仍然显示,通常是因为:

  1. 组件使用了position: fixed定位且z-index设置过高
  2. 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"
        }
    }
}
回到顶部