mui几种页面跳转方式对比总结概括

2020-04-22 07:39:28易采站长站整理

        title: ‘正在加载…’, //等待对话框上显示的提示内容 
        options: { 
            width: waiting – dialog – widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度 
            height: waiting – dialog – height, //等待框背景区域高度,默认根据内容自动计算合适高度 
            …… 
        } 
    } 
}) 
  
 

3.预加载页面

// 方式1 
mui.init({ 
    preloadPages: [{ 
        url: prelaod – page – url, 
        id: preload – page – id, 
        styles: {}, //窗口参数 
        extras: {}, //自定义扩展参数 
        subpages: [{}, {}] //预加载页面的子页面 
    }] 
}); 
  
// 方式2 
var page = mui.preload({ 
    url: new – page – url, 
    id: new – page – id, //默认使用当前页面的url作为id 
    styles: {}, //窗口参数 
    extras: {} //自定义扩展参数 
}); 
  
 

【一些区别】

1.子页面和非子页面

以上三种方式中,2,3打开的页面非子页面,

区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html

2.子页面适用于侧滑菜单

子页面有其有点,特别适用与index.html+list.html这种情况,

如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,

而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。

3.子页面实用频繁切换的情况

如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,

采用子页面模式就不会,采用新页面模式几率很大。

4.子页面适用与下拉刷新和上拉加载

之前做大下拉刷新的时候,采用的是新页面的形式,

按照官网教程,怎么搞都不成功,

后来看了下源码,发现下拉刷新必须采用子页面的形式,

也就是你的list.html必须是index.html的子页面,才可以下拉刷新。