mui的页面跳转方式-

【几种打开页面的方式】

1.初始化时创建子页面

2.直接打开新页面

3.预加载页面

【示例】

1.初始化时创建子页面

mui.init({  
    subpages: [{  
        url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址  
        id: your - subpage - id, //子页面标志  
        styles: {  
            top: subpage - top - 
position
, //子页面顶部位置  
            bottom: subpage - bottom - position, //子页面底部位置  
            width: subpage - width, //子页面宽度，默认为100%  
            
height
: subpage - height, //子页面高度，默认为100%  
            ......  
        },  
        extras: {} //额外扩展参数  
    }]  
});

2.直接打开新页面

mui.openWindow({  
    url: new - page - url,  
    id: new - page - id,  
    styles: {  
        top: newpage - top - position, //新页面顶部位置  
        bottom: newage - bottom - position, //新页面底部位置  
        width: newpage - width, //新页面宽度，默认为100%  
        height: newpage - height, //新页面高度，默认为100%  
        ......  
    },  
    extras: {  
        ..... //自定义扩展参数，可以用来处理页面间传值  
    }  
    show: {  
        autoShow: true, //页面loaded
事件
发生后自动显示，默认为true  
        aniShow: animationType, //页面显示
动画
，默认为”slide-in-right“；  
        duration: animationTime //页面动画持续时间，
Android
平台默认100毫秒，iOS平台默认200毫秒；  
    },  
    waiting: {  
        autoShow: true, //自动显示等待框，默认为true  
        title: &＃39;正在加载...&＃39;, //等待对话框上显示的提示内容  
        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的子页面，才可以下拉刷新。

5.新页面适用于新页面

open一个新页面，适用于查看详情之类的，需要打开一个新页面的情况，

并且mui自己封装了新页面的back方法，你就不需要去操心了。

6.预加载页面的两种方式

第一种是在初始化的时候预加载，

这种情况适合在你这个页面在很久之后才会用，

如果你要立即到的页面并使用，那么你会得到null。

第二种方式类似与open，

个人感觉没有什么太大的区别，

唯一的区别是open就直接打开了，

preload只是加载，你可以之后选择打开的时机。

7.总结

需要下拉刷新上拉加载请使用子页面，

需要打开一个新页面请使用新页面方式，

需要加载一个页面但是暂时不使用请使用预加载方式。

相信看了本文案例你已经掌握了方法，更多精彩请关注 第一PHP社区 其它相关文章！

推荐阅读：

自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器

H5如何做出碎片式的图片切换

以上就是mui的页面跳转方式的详细内容，更多请关注 第一PHP社区 其它相关文章！