說明

上節說了list頁面的實現，其中關於幾種頁面的開啟方式沒有詳細述說，

本節詳細述說下幾種頁面開啟方式的區別。

幾種開啟頁面的方式

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只是載入，你可以之後選擇開啟的時機。

總結

需要下拉重新整理上拉載入請使用子頁面，

需要開啟一個新頁面請使用新頁面方式，

需要載入一個頁面但是暫時不使用請使用預載入方式。

更多教程：