mui中有哪些頁面跳轉(zhuǎn)方式-創(chuàng)新互聯(lián)

這篇文章主要介紹mui中有哪些頁面跳轉(zhuǎn)方式，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的萬柏林網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

【幾種打開頁面的方式】

1.初始化時(shí)創(chuàng)建子頁面

2.直接打開新頁面

3.預(yù)加載頁面

【示例】

1.初始化時(shí)創(chuàng)建子頁面

mui.init({ 
    subpages: [{ 
        url: your - subpage - url, //子頁面HTML地址，支持本地地址和網(wǎng)絡(luò)地址 
        id: your - subpage - id, //子頁面標(biāo)志 
        styles: { 
            top: subpage - top - position, //子頁面頂部位置 
            bottom: subpage - bottom - position, //子頁面底部位置 
            width: subpage - width, //子頁面寬度，默認(rèn)為100% 
            height: subpage - height, //子頁面高度，默認(rèn)為100% 
            ...... 
        }, 
        extras: {} //額外擴(kuò)展參數(shù) 
    }] 
});

2.直接打開新頁面

mui.openWindow({ 
    url: new - page - url, 
    id: new - page - id, 
    styles: { 
        top: newpage - top - position, //新頁面頂部位置 
        bottom: newage - bottom - position, //新頁面底部位置 
        width: newpage - width, //新頁面寬度，默認(rèn)為100% 
        height: newpage - height, //新頁面高度，默認(rèn)為100% 
        ...... 
    }, 
    extras: { 
        ..... //自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值 
    } 
    show: { 
        autoShow: true, //頁面loaded事件發(fā)生后自動顯示，默認(rèn)為true 
        aniShow: animationType, //頁面顯示動畫，默認(rèn)為”slide-in-right“； 
        duration: animationTime //頁面動畫持續(xù)時(shí)間，Android平臺默認(rèn)100毫秒，iOS平臺默認(rèn)200毫秒； 
    }, 
    waiting: { 
        autoShow: true, //自動顯示等待框，默認(rèn)為true 
        title: '正在加載...', //等待對話框上顯示的提示內(nèi)容 
        options: { 
            width: waiting - dialog - widht, //等待框背景區(qū)域?qū)挾?，默認(rèn)根據(jù)內(nèi)容自動計(jì)算合適寬度 
            height: waiting - dialog - height, //等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動計(jì)算合適高度 
            ...... 
        } 
    } 
}) 

3.預(yù)加載頁面

// 方式1 
mui.init({ 
    preloadPages: [{ 
        url: prelaod - page - url, 
        id: preload - page - id, 
        styles: {}, //窗口參數(shù) 
        extras: {}, //自定義擴(kuò)展參數(shù) 
        subpages: [{}, {}] //預(yù)加載頁面的子頁面 
    }] 
}); 
  
// 方式2 
var page = mui.preload({ 
    url: new - page - url, 
    id: new - page - id, //默認(rèn)使用當(dāng)前頁面的url作為id 
    styles: {}, //窗口參數(shù) 
    extras: {} //自定義擴(kuò)展參數(shù) 
}); 

【一些區(qū)別】

1.子頁面和非子頁面

以上三種方式中，2，3打開的頁面非子頁面，

區(qū)別是子頁面相當(dāng)于html中的iframe，而非子頁面相當(dāng)于新開了一個(gè)瀏覽器窗口加載了一個(gè)html

2.子頁面適用于側(cè)滑菜單

子頁面有其有點(diǎn)，特別適用與index.html+list.html這種情況，

如果用index.html(主頁面)+list.html(子頁面)實(shí)現(xiàn)的話，當(dāng)主頁面右滑時(shí)子頁面會自動跟隨，

而用index.html(主頁面)+list.html(新頁面)實(shí)現(xiàn)的話，主頁面右滑，新頁面不右滑，還得單獨(dú)處理新頁面。

3.子頁面實(shí)用頻繁切換的情況

如果頻繁左滑右滑，在配置較低的手機(jī)上會出現(xiàn)list.html遮住index.html的情況，

采用子頁面模式就不會，采用新頁面模式幾率很大。

4.子頁面適用與下拉刷新和上拉加載

之前做大下拉刷新的時(shí)候，采用的是新頁面的形式，

按照官網(wǎng)教程，怎么搞都不成功，

后來看了下源碼，發(fā)現(xiàn)下拉刷新必須采用子頁面的形式，

也就是你的list.html必須是index.html的子頁面，才可以下拉刷新。

5.新頁面適用于新頁面

open一個(gè)新頁面，適用于查看詳情之類的，需要打開一個(gè)新頁面的情況，

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

6.預(yù)加載頁面的兩種方式

第一種是在初始化的時(shí)候預(yù)加載，

這種情況適合在你這個(gè)頁面在很久之后才會用，

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

第二種方式類似與open，

個(gè)人感覺沒有什么太大的區(qū)別，

的區(qū)別是open就直接打開了，

preload只是加載，你可以之后選擇打開的時(shí)機(jī)。

以上是“mui中有哪些頁面跳轉(zhuǎn)方式”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：mui中有哪些頁面跳轉(zhuǎn)方式-創(chuàng)新互聯(lián)
本文URL：http://bm7419.com/article20/ddhcjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營