MUI-改变waiting中的加载loading图片
如果你在使用MUI框架开发一套移动端的网站或打包Android的话,在跳转各个href的时候,应该会发现href无效化,OK。这就是MUI框架为了使得网页之间的跳转,尽量能与原生开发的效果保持一致所做出来的努力。
解决href跳转,我们一般都是使用下面这个javascript语句,通过调用mui.openWindow()函数来跳转界面,具体参数可以看MUI的手册。
mui('.dn_nav_ul').on('tap', 'a', function() {
var href = this.getAttribute('href');
mui.openWindow(href);
});
但是,我们跳转后,发现他会有一个加载的loading图,像这样的
对很多项目需求来说,可能就需要更换一个loading图,而更换loading图的要求,我们需要参考下官方网站的解释:
接下来,就找到了这个描述
当初看到这里,还有点懵,他说的是自定义loading图标的路径,png格式,并且必须是本地资源地址; loading图要求宽是高的整数倍,显示等待框时按照图片的高横向截取每帧刷新。
找了一些资料,才明白高横向截取什么意思,高横向截取的意思就是我们可以把同一张图层,用PS复制10遍,并将图层从左到右排列在一起,可调节每张图层的旋转角度,最后拼接成一张png图片导出即可,下面就是我做好用的图
然后将代码换成如***意loading-icon就是图片地址,必须是本地资源文件。
mui('.dn_nav_ul').on('tap', 'a', function() {
var href = this.getAttribute('href');
//非plus环境,直接走href跳转
if(!mui.os.plus) {
location.href = href;
return;
}
mui.openWindow({
url:href,
show:{
autoShow:true,
aniShow:"slide-in-left",//页面显示动画,默认为;
duration:500,
},
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:'正在加载...',//等待对话框上显示的提示内容
options:{
loading:{
display:"inline",
icon:"images/loading.png",
interval:100
},
}
},
createNew:true,
});
});
希望能帮助到你。