HTML5+開(kāi)發(fā)移動(dòng)app教程4-mui中幾種open頁(yè)面的區(qū)別_html/css_WEB-ITnose

使用hbuilder+mui做app一段時(shí)間，期間遇到問(wèn)題不少，

自己摸索，做了個(gè)app，詳見(jiàn)：http://uikoo9.com/dishi/download

如果您水平比這個(gè)高，那就不用看了，直接跳過(guò)。

【水平】

由于用hbuilder+mui出于興趣，也就沒(méi)有去看源碼，

停留在使用總結(jié)層次，所以有說(shuō)的不對(duì)的地方還請(qǐng)見(jiàn)諒。

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

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

2.直接打開(kāi)新頁(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.直接打開(kāi)新頁(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)畫(huà)，默認(rèn)為”slide-in-right“； duration: animationTime //頁(yè)面動(dòng)畫(huà)持續(xù)時(shí)間，Android平臺(tái)默認(rèn)100毫秒，iOS平臺(tái)默認(rèn)200毫秒； }, waiting: { autoShow: true, //自動(dòng)顯示等待框，默認(rèn)為true title: '正在加載...', //等待對(duì)話(huà)框上顯示的提示內(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è)面

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

【一些區(qū)別】

1.子頁(yè)面和非子頁(yè)面

以上三種方式中，2，3打開(kāi)的頁(yè)面非子頁(yè)面，

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

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

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

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

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

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

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

采用子頁(yè)面模式就不會(huì)，采用新頁(yè)面模式幾率很大。

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

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

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

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

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

5.新頁(yè)面適用于新頁(yè)面

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

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

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

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

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

如果你要立即到的頁(yè)面并使用，那么你會(huì)得到null。

第二種方式類(lèi)似與open，

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

唯一的區(qū)別是open就直接打開(kāi)了，

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

7.總結(jié)

需要下拉刷新上拉加載請(qǐng)使用子頁(yè)面，

需要打開(kāi)一個(gè)新頁(yè)面請(qǐng)使用新頁(yè)面方式，

需要加載一個(gè)頁(yè)面但是暫時(shí)不使用請(qǐng)使用預(yù)加載方式。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com