mui的頁面跳轉方式有哪些

這篇文章主要介紹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的頁面跳轉方式有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！