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

直接使用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();

 

你可能感兴趣的:(javascript,uni-app)