首頁 > web前端 > H5教程 > 比較總結mui頁面跳轉方式之間的差異

比較總結mui頁面跳轉方式之間的差異

巴扎黑
發布: 2017-08-22 17:31:00
原創
2207 人瀏覽過

這篇文章主要介紹了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: '正在加载...', //等待对话框上显示的提示内容  
        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.總結

需要下拉刷新上拉加載請使用子頁面,

需要開啟新頁面請使用新頁面方式,# #####需要載入一個頁面但是暫時不使用請使用預先載入方式。 ###

以上是比較總結mui頁面跳轉方式之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板