mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng)
一、什么是良好的用戶體驗(yàn)（淘寶、易迅）
1、預(yù)加載截圖方式：點(diǎn)擊、切換模版窗口、顯示等待框、執(zhí)行ajax并渲染、顯示數(shù)據(jù)、關(guān)閉等待框。
2、head、body分開(kāi)載入方式：點(diǎn)擊、切換窗口顯示等待中、執(zhí)行ajax并渲染頁(yè)面、將渲染好的頁(yè)面append到body中。
3、lazyload等方式感覺(jué)太貼近網(wǎng)頁(yè)，就不算在良好用戶體驗(yàn)內(nèi)了。
二、注意事項(xiàng)
1、窗口切換時(shí)執(zhí)行并發(fā)任務(wù)（ajax請(qǐng)求或渲染頁(yè)面）會(huì)影響體驗(yàn)
2、無(wú)從得知webview渲染完畢的時(shí)機(jī)
3、使用pop-in應(yīng)該將動(dòng)畫(huà)延長(zhǎng)到200-300毫秒，讓切換效果更流暢
三、打開(kāi)新窗口方法
1、head、body分開(kāi)載入
（1）先顯示帶有標(biāo)題欄的head頁(yè)面，content中顯示"加載中..."或者顯示SVG動(dòng)畫(huà)
（2）通知body頁(yè)面執(zhí)行ajax拉取數(shù)據(jù)渲染頁(yè)面，渲染完畢append到head頁(yè)面上
2、頁(yè)面渲染后再切換
（1）點(diǎn)擊后顯示等待框
（2）通知show頁(yè)面執(zhí)行ajax拉取數(shù)據(jù)渲染頁(yè)面
（3）渲染代碼結(jié)束后，延遲50ms關(guān)閉等待框，顯示出show頁(yè)面。
3、預(yù)加載頁(yè)面直接切換
（1）點(diǎn)擊后切換到預(yù)加載的頁(yè)面
（2）顯示等待框，執(zhí)行ajax拉取數(shù)據(jù)渲染頁(yè)面
（3）渲染代碼結(jié)束后，關(guān)閉等待框
注：此種方法為了避免打開(kāi)新的頁(yè)面數(shù)據(jù)不對(duì)，需要監(jiān)聽(tīng)重寫(xiě)mui.back()，清空頁(yè)面的所有數(shù)據(jù)。
總結(jié)
以上所述是小編給大家介紹的mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
微信小程序audio組件在ios端無(wú)法播放的解決辦法
audio是音頻組件,用于播放一個(gè)基于http協(xié)議的音頻資源,這篇文章主要給大家介紹了關(guān)于微信小程序audio組件在ios端無(wú)法播放的解決辦法,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對(duì)于javascript游戲設(shè)計(jì)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-09-09
下面小編就為大家分享一篇js中el表達(dá)式的使用和非空判斷方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
JavaScript asp.net 獲取當(dāng)前超鏈接中的文本
今天用到，不會(huì)。網(wǎng)上找到一個(gè)方法，趕快記下來(lái)。可以獲取超鏈接的鏈接文本。2009-04-04
LayUI樹(shù)形表格treetable使用及說(shuō)明
這篇文章主要介紹了LayUI樹(shù)形表格treetable使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Document.body.scrollTop的值總為零的快速解決辦法
這篇文章主要介紹了Document.body.scrollTop的值總為零的解決方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
PhantomJS快速入門教程(服務(wù)器端的 JavaScript API 的 WebKit)
Phantom JS是一個(gè)服務(wù)器端的 JavaScript API 的 WebKit。其支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG2015-08-08
JS創(chuàng)建或填充任意長(zhǎng)度數(shù)組的小技巧匯總
在JavaScript 中,我們往往會(huì)遇到需要使用某些默認(rèn)值來(lái)填充數(shù)組的情況,那么都有哪些方式可以完成這樣的任務(wù)呢?這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建或填充任意長(zhǎng)度數(shù)組的小技巧,需要的朋友可以參考下2021-10-10
js如何監(jiān)聽(tīng)input輸入事件及使用防抖封裝函數(shù)處理方法
這篇文章主要給大家介紹了關(guān)于js如何監(jiān)聽(tīng)input輸入事件及使用防抖封裝函數(shù)處理方法的相關(guān)資料,最近有一個(gè)需求,需要我們實(shí)時(shí)監(jiān)聽(tīng)input輸入框中的內(nèi)容,從而帶來(lái)更好的用戶體驗(yàn),需要的朋友可以參考下2023-07-07
div浮層,滾動(dòng)條移動(dòng),位置保持不變的4種方法匯總
這篇文章主要是對(duì)div浮層,滾動(dòng)條移動(dòng),位置保持不變的4種方法進(jìn)行了匯總介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12