mui幾種頁(yè)面跳轉(zhuǎn)方式對(duì)比總結(jié)概括

2024-08-26 00:19:54

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

【幾種打開頁(yè)面的方式】

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

2.直接打開新頁(yè)面

3.預(yù)加載頁(yè)面

【示例】

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

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

2.直接打開新頁(yè)面

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

3.預(yù)加載頁(yè)面

// 方式1
mui.init({
    preloadPages: [{
        url: prelaod - page - url,
        id: preload - page - id,
        styles: {}, //窗口參數(shù)
        extras: {}, //自定義擴(kuò)展參數(shù)
        subpages: [{}, {}] //預(yù)加載頁(yè)面的子頁(yè)面
    }]
});

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