uni-app showModal的success中使用showLoading loading效果只是闪一下就关闭了

uni-app showModal的success中使用showLoading loading效果只是闪一下就关闭了

开发环境 版本号 项目创建方式
Windows win11_23H2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.75

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：小米8 se

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

uni.showModal({  
    content: "测试Loading",  
    // 回调函数  
    success(res : UniShowModalResult) {  
        uni.showLoading({  
            title: "",  
            mask: true  
        })  
    }  
})

操作步骤：

新建一个空项目，勾选uniapp-x，在index.uvue的script中使用如下代码，点击确定或取消后，loading只是短暂的显示一下；

uni.showModal({  
    content: "测试Loading",  
    // 回调函数  
    success(res : UniShowModalResult) {  
        uni.showLoading({  
            title: "",  
            mask: true  
        })  
    }  
})

预期结果：

需要手动调用hideLoading后在关闭loading效果

实际结果：

自动关闭了loading效果

bug描述：

使用的uniapp-x、uts、uvue； showModal的success中使用showLoading； loading效果在没有调用hideLoading，只是闪一下就自己关闭了。 包括showToast也一样，并没有延迟1500ms后关闭，而闪一下是就关闭了。


更多关于uni-app showModal的success中使用showLoading loading效果只是闪一下就关闭了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

新建一个空项目，勾选uniapp-x， 就是uniapp-x 项目，hx-release、hx-alpha 按步骤验证没有复现如上问题，麻烦提供下hx的版本，提供下复现示例

更多关于uni-app showModal的success中使用showLoading loading效果只是闪一下就关闭了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚新建的项目；运行到Android APP基座；会不会是Android版本较低的问题，是Android 10版的 hx: 4.75 UNI8E2407F

问题已确认，uni.showModal / uni.showLoading / 等组件目前关闭行为会冲突。
临时解决办法: showModal 的success 回调中 延迟100ms弹出uni.showLoading

好的! 谢谢

这是因为在uni-app中，showModal弹窗关闭时会自动触发页面的重新渲染，导致后续的showLoading被立即重置。showModal和showLoading属于同级别的原生组件，它们的显示/隐藏机制存在冲突。

当showModal完全关闭后，页面会强制刷新UI状态，此时新调用的showLoading会被瞬间清除。这不是bug，而是原生组件生命周期管理的正常行为。

解决方案：

  1. 使用setTimeout延迟显示loading：
uni.showModal({
    content: "测试Loading",
    success(res) {
        setTimeout(() => {
            uni.showLoading({ title: "", mask: true })
        }, 100)
    }
})
回到顶部