调用uni.showModal在uni-app中没有得到预期效果应该是bug

调用uni.showModal在uni-app中没有得到预期效果应该是bug

项目信息 详情
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.45
浏览器平台 Chrome
浏览器版本 132.0.6834.160

示例代码：

methods: {  
    click(){  
        uni.showModal({  
            title:'1',  
            content:'1',  
            success: () => {  
                this.click2()  
            }  
        })  
    },  
    click2(){  
        uni.showModal({  
            title:'2',  
            content:'2',  
            success: () => {  

            }  
        })  
    }  
}

操作步骤：

随便建个空白程序，按钮处罚click就可以

预期结果：

弹出2弹窗

实际结果：

没有弹出，并且1也不弹了

bug描述：

在调用uni.showModal时，如果在回调里继续调用uni.showModal，这里就卡住了，再点按钮啥反应都没有了
如下面示例，按钮出发click，回调里处罚click2，这个时候click2里的弹窗不会触发，再点按钮，1里的也不弹了
编译器也没有任何错误提示，操作不下去了


更多关于调用uni.showModal在uni-app中没有得到预期效果应该是bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

不要在showModal添加成功后直接执行，可以在点击成功或者取消的时候在执行下次弹窗确认 click1() {
uni.showModal( {
title: ‘1’,
content: ‘1’,
showCancel: false,
success: ( res ) => {
if ( res.confirm ) {
this.click2()
} else if ( res.cancel ) {

                    }  
                }  
            } )  
        },  
        click2() {  
            uni.showModal( {  
                title: '2',  
                content: '2',  
                showCancel: false,  
                success: ( res ) => {  
                    if ( res.confirm ) {} else if ( res.cancel ) {}  
                }  
            } )  
        }<br>

更多关于调用uni.showModal在uni-app中没有得到预期效果应该是bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


浏览器的话这个的实例都是一个，重复调用会有未知问题，建议自己写一个。。我就是使用dialog来自己重写的一个

加了个延时好了，主要是官方不给报个错误，开始没意识到是这个问题

这是一个已知的uni-app模态框调用限制问题。在uni.showModal的回调中直接再次调用showModal会导致弹窗队列阻塞。

原因分析：

  1. uni.showModal是异步操作，其回调执行时前一个弹窗可能尚未完全关闭
  2. 平台原生弹窗组件存在调用限制，短时间内连续调用会出现冲突

解决方案：

  1. 使用setTimeout延迟调用第二个弹窗：
success: () => {
    setTimeout(() => {
        this.click2()
    }, 300)
}
  1. 或者使用Promise封装确保顺序执行：
async click(){
    await new Promise(resolve => {
        uni.showModal({
            title:'1',
            content:'1',
            success: resolve
        })
    })
    this.click2()
}
回到顶部