转：http://ask.dcloud.net.cn/article/12856
写在前面：
好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件，为了统一组件样式和体验，写了这么一个扩展插件。
CSS和JS代码耦合性应该还是较低的，不妥之处欢迎指教！
优点：可以同时兼容Html5和plus，不必为不同环境单独分别Loading组件。
缺点：在页面嵌套情况下，遮罩仅对当前页面起作用。
使用方法：
显示加载框：
mui.showLoading("正在加载..","div"); //加载文字和类型，plus环境中类型为div时强制以div方式显示
隐藏加载框：
mui.hideLoading(callback);//隐藏后的回调函数
使用方法：
显示加载框：
mui.showLoading("正在加载..","div"); //加载文字和类型，plus环境中类型为div时强制以div方式显示
注意：
加载框只会显示一个，多次调用showLoading只会显示最后一次调用的内容。
Javascript代码：
//扩展mui.showLoading
(function($, window) {
//显示加载框
$.showLoading = function(message,type) {
if ($.os.plus && type !== 'div') {
$.plusReady(function() {
plus.nativeUI.showWaiting(message);
});
} else {
var html = '';
html += '<i class="mui-spinner mui-spinner-white"></i>';
html += '<p class="text">' + (message || "数据加载中") + '</p>'; //遮罩层
var mask=document.getElementsByClassName("mui-show-loading-mask");
if(mask.length==){
mask = document.createElement('div');
mask.classList.add("mui-show-loading-mask");
document.body.appendChild(mask);
mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
}else{
mask[].classList.remove("mui-show-loading-mask-hidden");
}
//加载框
var toast=document.getElementsByClassName("mui-show-loading");
if(toast.length==){
toast = document.createElement('div');
toast.classList.add("mui-show-loading");
toast.classList.add('loading-visible');
document.body.appendChild(toast);
toast.innerHTML = html;
toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
}else{
toast[].innerHTML = html;
toast[].classList.add("loading-visible");
}
}
}; //隐藏加载框
$.hideLoading = function(callback) {
if ($.os.plus) {
$.plusReady(function() {
plus.nativeUI.closeWaiting();
});
}
var mask=document.getElementsByClassName("mui-show-loading-mask");
var toast=document.getElementsByClassName("mui-show-loading");
if(mask.length>){
mask[].classList.add("mui-show-loading-mask-hidden");
}
if(toast.length>){
toast[].classList.remove("loading-visible");
callback && callback();
}
}
})(mui, window);
CSS代码
/*----------------mui.showLoading---------------*/
.mui-show-loading {
position: fixed;
padding: 5px;
width: 120px;
min-height: 120px;
top: %;
left: %;
margin-left: -60px;
background: rgba(, , , 0.6);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
visibility: hidden;
margin: ;
z-index: ; -webkit-transition-duration: .2s;
transition-duration: .2s;
opacity: ;
-webkit-transform: scale(0.9) translate(-%, -%);
transform: scale(0.9) translate(-%, -%);
-webkit-transform-origin: ;
transform-origin: ;
}
.mui-show-loading.loading-visible {
opacity: ;
visibility: visible;
-webkit-transform: scale() translate(-%, -%);
transform: scale() translate(-%, -%);
}
.mui-show-loading .mui-spinner{
margin-top: 24px;
width: 36px;
height: 36px;
}
.mui-show-loading .text {
line-height: 1.6;
font-family: -apple-system-font,"Helvetica Neue",sans-serif;
font-size: 14px;
margin: 10px ;
color: #fff;
} .mui-show-loading-mask {
position: fixed;
z-index: ;
top: ;
right: ;
left: ;
bottom: ;
}
.mui-show-loading-mask-hidden{
display: none !important;
}
预览效果：