uni-app SUBNVUE原生子窗体在非tabbar页面遮罩丢失

uni-app SUBNVUE原生子窗体在非tabbar页面遮罩丢失

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 22621.674
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 Android
手机系统版本号 Android 14
手机厂商 小米
手机机型 小米12
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

const subNVue = uni.getSubNVueById('userdata');  
subNVue.show('slide-in-bottom', 300, function() {  
});  

"path": "pages/Index/Index",  
"style": {  
    "navigationBarTitleText": "",  
    "enablePullDownRefresh": false,  
    "app-plus": {  
        "subNVues": [  
        {  
            "id": "userdata",  
            "type": "popup",  
            "path": "pages/subNVue/userdata/userdata",  
            "style": {  
                "background": "transparent",  
                "mask": "rgba(0,0,0,0.5)"  
            }                         
        }  
        ]}  
}

操作步骤：

  • 简单设置子窗体

预期结果：

  • 正常显示遮罩

实际结果：

  • 无透明遮罩了，而且遮罩也是无法点击关闭的。

bug描述：

subNVue在index.nvue首页tabbar page.json插入。 但是在其他非tabbar页面调用，背景遮罩mask rgba(0,0,0,0.5)就不显示了。而在其他页面比如index2 3 4 只要是tabbar页面，遮罩效果就有，但只要是非TABBAR页面，虽然也能弹出子窗体，但遮罩效果就没了。 不知道是就这么设计的，还是BUG？ 纯NVUE模式下使用uniapp编译，VUE3+VUEX环境


更多关于uni-app SUBNVUE原生子窗体在非tabbar页面遮罩丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app SUBNVUE原生子窗体在非tabbar页面遮罩丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 subNVue 原生子窗体时，可能会遇到在非 tabBar 页面遮罩丢失的问题。这通常是因为 subNVue 的层级管理在不同的页面中表现不一致导致的。

解决方法

  1. 检查 subNVue 的 position 属性： 确保 subNVue 的 position 属性设置为 absolute 或 fixed，以确保它能够正确覆盖在当前页面上。

    const subNVue = uni.getSubNVueById('yourSubNVueId');
subNVue.setStyle({
    position: 'fixed'
});

  2. 调整 subNVue 的 zIndex： 确保 subNVue 的 zIndex 值足够高，以确保它能够覆盖在其他元素之上。

    const subNVue = uni.getSubNVueById('yourSubNVueId');
subNVue.setStyle({
    zIndex: 9999
});

  3. 手动显示遮罩层： 如果遮罩层丢失，可以手动创建一个遮罩层并控制其显示和隐藏。

    const mask = uni.createSelectorQuery().select('.mask');
mask.style({
    display: 'block',
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    zIndex: 9998
});

  4. 监听页面生命周期： 在 onShow 和 onHide 生命周期中手动控制 subNVue 的显示和隐藏，确保在页面切换时遮罩层能够正确显示。

    onShow() {
    const subNVue = uni.getSubNVueById('yourSubNVueId');
    subNVue.show();
},
onHide() {
    const subNVue = uni.getSubNVueById('yourSubNVueId');
    subNVue.hide();
}

  5. 使用 plus.webview 控制层： 如果上述方法无效，可以尝试使用 plus.webview 进行更底层的控制。

    const currentWebview = plus.webview.currentWebview();
const subNVue = currentWebview.getSubNVueById('yourSubNVueId');
subNVue.setStyle({
    position: 'fixed',
    zIndex: 9999
});
回到顶部