mui幾種頁面跳轉(zhuǎn)方式對比【轉(zhuǎn)】

[http://blog.csdn.net/uikoo9/article/details/44676963]
【幾種打開頁面的方式】
1.初始化時創(chuàng)建子頁面
2.直接打開新頁面
3.預(yù)加載頁面

【示例】
1.初始化時創(chuàng)建子頁面
<code>
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ù)
}]
});
</code>

2.直接打開新頁面

<code>
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ù)時間,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ì)算合適高度
......
}
}
})
</code>

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

<code>
// 方式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ù)
});
</code>

【一些區(qū)別】

1.子頁面和非子頁面

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

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

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

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

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

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

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

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

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

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

之前做大下拉刷新的時候,采用的是新頁面的形式,

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

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

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

5.新頁面適用于新頁面

open一個新頁面,適用于查看詳情之類的,需要打開一個新頁面的情況,

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

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

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

這種情況適合在你這個頁面在很久之后才會用,

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

第二種方式類似與open,

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

唯一的區(qū)別是open就直接打開了,

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

7.總結(jié)

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

需要打開一個新頁面請使用新頁面方式,

需要加載一個頁面但是暫時不使用請使用預(yù)加載方式。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,502評論 19 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評論 1 92
  • MUI背景介紹 MUI是一套前端框架,由DCLOUD公司研發(fā)而成,提供大量H5和js語言組成的組件,大大提高了開發(fā)...
    jackzhouyu閱讀 29,889評論 2 76
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,253評論 6 342
  • 如何解決分布式系統(tǒng)數(shù)據(jù)事務(wù)一致性問題(HBase加Solr) - 王安琪 - 博客園http://www.cnbl...
    葡萄喃喃囈語閱讀 512評論 0 0

友情鏈接更多精彩內(nèi)容