uni-app subNvue 弹框显示异常

uni-app subNvue 弹框显示异常

示例代码：

{  
    "id": "dialog", // 唯一标识    
    "path": "./pages/device/subnvue/dialog", // 页面路径    
    "type": "popup",    
    "style": {    
        "position": "absolute",  
        "top":"24%",  
        "left":"48rpx",   
        "width": "654rpx",    
        "height": "584rpx",    
        "background": "rgba(0,0,0,0)"    
    }    
}

操作步骤：

第一步：显示弹框，

const dialog = uni.getSubNVueById("dialog");  
dialog.show('fade-in', 100, function(){  

});

第二步：然后关闭屏幕
第三步：然后再打开屏幕，弹框显示异常。即使关闭弹框，重新显示也会有缺失

预期结果：

预期应该显示和关闭屏幕之前一样。信息完整不缺失

实际结果：

弹框内容有缺失

bug描述：

弹框显示后 手机锁屏，然后再显示屏幕，弹框显示异常

示例图片1 示例图片2


更多关于uni-app subNvue 弹框显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

俺也一样。。弹框显示缺失 但是退出app在进弹框又好了 点击以后又缺失

更多关于uni-app subNvue 弹框显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用之前制作的基座运行 问题就能解决了

这是一个已知的 subNvue 在屏幕状态变化时的渲染问题。当应用进入后台（如锁屏）再返回前台时，subNvue 的渲染层可能出现异常。

解决方案：

  1. 监听应用状态变化：在 App.vue 或页面中监听应用前后台切换
// App.vue
onShow: function() {
    // 应用从后台进入前台时，强制刷新所有subNvue
    this.refreshSubNVue()
},
methods: {
    refreshSubNVue() {
        const dialog = uni.getSubNVueById("dialog")
        if (dialog && dialog.isShow) {
            dialog.hide()
            setTimeout(() => {
                dialog.show('fade-in', 100)
            }, 50)
        }
    }
}
  1. 使用条件渲染：在 subNvue 页面中使用 v-if 控制内容显示
<template>
    <view v-if="visible">
        <!-- 弹框内容 -->
    </view>
</template>
<script>
export default {
    data() {
        return {
            visible: true
        }
    },
    onHide() {
        this.visible = false
    },
    onShow() {
        this.visible = true
    }
}
</script>
  1. 替代方案：考虑使用 uni-app 原生组件或 uni-modal 替代 subNvue 弹框，这些组件在屏幕状态变化时更稳定。

临时修复：在显示弹框前先隐藏再显示，强制重新渲染：

const dialog = uni.getSubNVueById("dialog")
if (dialog.isShow) {
    dialog.hide()
}
setTimeout(() => {
    dialog.show('fade-in', 100)
}, 100)
回到顶部