MUI-改变waiting中的加载loading图片

╰+哭是因爲堅強的太久メ 2022-04-15 01:40 735阅读 0赞

如果你在使用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图，像这样的

![20181120093154407.gif][]

对很多项目需求来说，可能就需要更换一个loading图，而更换loading图的要求，我们需要参考下官方网站的解释：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70][]

接下来，就找到了这个描述

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70 2][]

当初看到这里，还有点懵，他说的是自定义loading图标的路径，png格式，并且必须是本地资源地址； loading图要求宽是高的整数倍，显示等待框时按照图片的**高横向截取每帧刷新。**

**找了一些资料，才明白高横向截取什么意思，高横向截取的意思就是我们可以把同一张图层，用PS复制10遍，并将图层从左到右排列在一起，可调节每张图层的旋转角度，最后拼接成一张png图片导出即可，下面就是我做好用的图**

![20181120093942805.png][] loading

然后将代码换成如下，注意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,
    									});
    							});

希望能帮助到你。

[20181120093154407.gif]: /images/20220415/73d005169e9c46d395769b22d82281e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70]: /images/20220415/95c9f9af36e747a18936a5858cd147a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70 1]: /images/20220415/a2ad2692c6c44e268880be34c35ecb86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTQ0MTU1NQ_size_16_color_FFFFFF_t_70 2]: /images/20220415/1d6d394f6a37429eb42bce064c55d1c2.png
[20181120093942805.png]: /images/20220415/798aaf50bfdb4816bac7abb9d564d56b.png