解决UNI-APP "请注意 showLoading 与 hideLoading 必须配对使用" 问题

最新推荐文章于 2025-06-14 19:01:54 发布

原创最新推荐文章于 2025-06-14 19:01:54 发布 · 4w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

uni-app

14 篇文章

订阅专栏

本文介绍了一种解决UniApp中Loading显示与隐藏不配对问题的方法，通过使用计数器来跟踪Loading的调用次数，确保了Loading的正确显示与隐藏，并在10秒后自动隐藏Loading，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接使用uni.showLoading()和uni.hideLoading()经常会出现 "请注意 showLoading 与 hideLoading 必须配对使用" 的问题

原因：loading全局只创建一个，hideLoading可能会触发多次导致loading已经被隐藏，没有达到预期的配对效果，虽然不至于报错，但是警告提示也让人感觉很不舒服。

解决方案：

用计数器记录loading被调用次数，调用hideLoading时，当计数达到0，才隐藏loading;并且默认超过10秒自动隐藏loading避免长时间锁屏造成用户体验差的问题

loading.js

// 加载信息，带遮罩
let needLoadingRequestCount = 0;
let loadingTimer;
export function showLoading(title = '', mask = true) {
	if (needLoadingRequestCount === 0) {
		uni.showLoading({
			title,
			mask
		});

		// 最长10s自动关闭
		loadingTimer = setTimeout(() => {
			if (needLoadingRequestCount > 0) {
				uni.hideLoading();
			}
		}, 10000);
	}

	needLoadingRequestCount++;
}

// 隐藏遮罩
export function hideLoading() {
	if (needLoadingRequestCount <= 0) return;

	needLoadingRequestCount--;

	if (needLoadingRequestCount === 0) {
        loadingTimer && clearTimeout(loadingTimer);
		uni.hideLoading();
	}
}

使用（也可以挂在到Vue.prototype中）

import {
    showLoading,
    hideLoading
} from 'utils/loading'

showLoading();
hideLoading();