fenyiwudian
fenyiwudian
  • 发布:2015-01-11 18:17
  • 更新:2015-01-12 18:33
  • 阅读:2719

如何自己控制转场时的等待图标

分类:MUI

webview转场时,会出现一个等待图标,等新的webview中的html加载完(好像是onload事件?对吗?)就会关掉这个等待图标,进入新的webview,但是我的新页面是一个动态的页面,每次页面显示的时候要通过ajax的请求得到远程数据,然后在按不同的方式显示在新的页面上,我这些请求和显示操作都是在新页面的onload事件触发时才做的,这样就会出现新页面onload完,webview就去掉等待图标进行转场,而这是我的请求才开始,页面还是空白的,等转完场,我的数据才显示在页面上,这中间已经出现白屏,我现在就想知道能不能自己控制什么时候去掉等待图标进行转场,比如我的ajax请求执行完,数据渲染完我再转场.而不是新页面一load完马上转场,或者说我这种方式本来就是不对的,还有其他更好的方法?

2015-01-11 18:17 负责人:无 分享
已邀请:
fenyiwudian

fenyiwudian (作者) -

按照楼上的方法做的,分享代码,希望能帮助有相同疑问的人.
a页面到b页面:
a页面触发事件到b页面时写如下代码

mui.openWindow("b.html","b",  
        {  
            waiting:{  
                autoShow:false,  
            }  
        })

b页面中中监听pagebeforeshow事件,在这里显示等待图标:

window.addEventListener("pagebeforeshow",function(){  
            plus.nativeUI.showWaiting("正在加载...");  
        })

b页面总ajax加载数据代码.加载完后再关闭等待图标:

mui.ajax("your_url",  
    {  
        error:function(){  
            console.log("list load failed");  
        },  
        success:function(){  
            console.log("list loaded");  
                        // 这里是拿到数据后的处理  
                        // 处理完关闭等待图标,如果页面渲染内容较多,可稍微延时再关闭  
                        plus.nativeUI.closeWaiting();  
        }  
    })
DCloud_UNI_FXY

DCloud_UNI_FXY

建议:

转场时,不要显示等待图标,而是直接show新的webview。等webview显示后,再自己显示等待图标,等ajax加载完数据后,关闭等待图标

参考openWindow的相关配置:http://dcloudio.github.io/mui/javascript/#openwindow

  • fenyiwudian (作者)

    我是用了你建议的方式实现了,谢谢.

    2015-01-12 18:35

该问题目前已经被锁定, 无法添加新回复