h5加载等待框-基于weui样式库

最新推荐文章于 2024-07-03 14:12:23 发布

山小雨

最新推荐文章于 2024-07-03 14:12:23 发布

阅读量2.9k

点赞数

分类专栏： h5 js

本文链接：https://blog.csdn.net/qq_26905845/article/details/81561576

版权

h5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
		<script src="../js/loadding.js"></script>
		<script src="../js/zepto.min.js"></script>
		<style>
		
		</style>
	</head>

	<body>
		<button onclick="change()">点击</button>

		<script>
			function change() {
				loddingShow(true);
				setTimeout(function() {
					loddingFihish();
				}, 1000);
			}
		</script>

	</body>

</html>

loadding.js

var $toast, $loadingToast;
var showToast;

function createLoadding() {
	var loddingDiv = document.createElement('div');
	loddingDiv.setAttribute('id', 'loadingToast');
	var mask = document.createElement('div');
	mask.className = 'weui-mask_transparent';

	var toast = document.createElement('div');
	toast.className = 'weui-toast';
	var img = document.createElement('i');
	img.className = 'weui-loading weui-icon_toast';
	var ptext = document.createElement('p');
	ptext.className = 'weui-toast__content';
	ptext.innerText = '数据加载中';
	toast.appendChild(img);
	toast.appendChild(ptext);

	loddingDiv.appendChild(mask);
	loddingDiv.appendChild(toast);
	document.body.appendChild(loddingDiv);
}

function createToast() {
	var finishDiv = document.createElement('div');
	finishDiv.setAttribute('id', 'toast');
	var mask = document.createElement('div');
	mask.className = 'weui-mask_transparent';

	var toast = document.createElement('div');
	toast.className = 'weui-toast';
	var img = document.createElement('i');
	img.className = 'weui-icon-success-no-circle weui-icon_toast';
	var ptext = document.createElement('p');
	ptext.className = 'weui-toast__content';
	ptext.innerText = '已完成';
	toast.appendChild(img);
	toast.appendChild(ptext);

	finishDiv.appendChild(mask);
	finishDiv.appendChild(toast);
	finishDiv.style.display = 'none';
	document.body.appendChild(finishDiv);
}

function loddingShow(isShowFinish) {

	/*<div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
    
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>*/
	showToast = isShowFinish;
	if(!$toast && isShowFinish) { //
		createToast();
	}
	if(!$loadingToast) {
		createLoadding();
	} else {
		$('#loadingToast').fadeIn(200);
	}

}

function loddingFihish() {
	$toast = $('#toast');
	$loadingToast = $('#loadingToast')
	if($loadingToast && $loadingToast.css('display') != 'none') {
		if(showToast) {
			console.log($toast)
			$loadingToast.fadeOut(0);
		} else {
			$loadingToast.fadeOut(200);
		}
	}
	if($toast && $toast.css('display') == 'none') {
		$('#toast').fadeIn(0);
		setTimeout(function() {
			$('#toast').fadeOut(200);
		}, 1000);
	}
}