uni-app x 中 uni.showLoading 无法关闭

uni-app x 中 uni.showLoading 无法关闭

示例代码：

onLoad() {  
    uni.showLoading({  
        title: '加载中...',  
    })  

},  
onReady() {  
    setTimeout(() => {  
        uni.hideLoading()  
    }, 2000)  
},

操作步骤：

onLoad() {  
    uni.showLoading({  
        title: '加载中...',  
    })  

},  
onReady() {  
    setTimeout(() => {  
        uni.hideLoading()  
    }, 2000)  
},

预期结果：

onLoad() {  
    uni.showLoading({  
        title: '加载中...',  
    })  

},  
onReady() {  
    setTimeout(() => {  
        uni.hideLoading() //关闭loading  
    }, 2000)  
},

实际结果：

onLoad() {  
    uni.showLoading({  
        title: '加载中...',  
    })  

},  
onReady() {  
    setTimeout(() => {  
        uni.hideLoading() // 无法关闭  
    }, 2000)  
},

bug描述：

详见下面 视频演示

Image Image


更多关于uni-app x 中 uni.showLoading 无法关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

换个 Android 14以下手机的再试试 看下是不是兼容问题

更多关于uni-app x 中 uni.showLoading 无法关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚测试了下，android 14没问题 <template>
<view>
test
</view>
</template>

<script> export default { data() { return { } }, onLoad() { console.log('11111111111111'); uni.showLoading({ title: '加载中...', }) // setTimeout(() => { // uni.hideLoading() // 无法关闭 // }, 2000) }, onReady() { console.log('222222222222222'); setTimeout(() => { uni.hideLoading() // 无法关闭 }, 2000) }, methods: { } } </script> <style> </style>

在 uni-app 中使用 uni.showLoading 时，如果无法关闭加载框，可能是由于以下几个原因导致的。以下是一些常见问题及解决方法：

1. 没有调用 uni.hideLoading

uni.showLoading 显示加载框后，必须通过调用 uni.hideLoading 来关闭它。如果你没有在适当的地方调用 uni.hideLoading，加载框将一直显示。

解决方法： 确保在加载完成后调用 uni.hideLoading。

uni.showLoading({
    title: '加载中...'
});

// 模拟异步操作
setTimeout(() => {
    uni.hideLoading();
}, 2000);

2. uni.hideLoading 被多次调用

如果在某些情况下多次调用 uni.hideLoading，可能会导致加载框无法正常关闭。

解决方法： 确保 uni.hideLoading 只在需要关闭加载框时调用一次。

3. 异步操作未完成

如果在异步操作未完成时调用了 uni.hideLoading，可能会导致加载框提前关闭，或者在异步操作完成后没有调用 uni.hideLoading。

解决方法： 确保在异步操作完成后调用 uni.hideLoading。

uni.showLoading({
    title: '加载中...'
});

someAsyncFunction().then(() => {
    uni.hideLoading();
}).catch(() => {
    uni.hideLoading();
});

4. 页面或组件生命周期问题

如果 uni.showLoading 是在页面或组件的某个生命周期钩子中调用的，而 uni.hideLoading 没有在适当的时机调用，可能会导致加载框无法关闭。

解决方法： 确保在页面或组件的适当生命周期钩子中调用 uni.hideLoading。

onLoad() {
    uni.showLoading({
        title: '加载中...'
    });
},

onReady() {
    uni.hideLoading();
}

5. 框架或平台兼容性问题

在某些情况下，可能是 uni-app 框架或特定平台的兼容性问题导致 uni.showLoading 无法正常关闭。

解决方法： 检查 uni-app 的版本和平台，确保使用的是最新版本，并查看是否有相关的已知问题或修复。

6. 调试和日志

如果以上方法都无法解决问题，可以尝试添加调试日志，检查 uni.showLoading 和 uni.hideLoading 的调用顺序和执行情况。

console.log('显示加载框');
uni.showLoading({
    title: '加载中...'
});

setTimeout(() => {
    console.log('隐藏加载框');
    uni.hideLoading();
}, 2000);
回到顶部