mui 打開新窗口的方式總結(jié)及注意事項
一、什么是良好的用戶體驗（淘寶、易迅）
1、預(yù)加載截圖方式：點擊、切換模版窗口、顯示等待框、執(zhí)行ajax并渲染、顯示數(shù)據(jù)、關(guān)閉等待框。
2、head、body分開載入方式：點擊、切換窗口顯示等待中、執(zhí)行ajax并渲染頁面、將渲染好的頁面append到body中。
3、lazyload等方式感覺太貼近網(wǎng)頁，就不算在良好用戶體驗內(nèi)了。
二、注意事項
1、窗口切換時執(zhí)行并發(fā)任務(wù)（ajax請求或渲染頁面）會影響體驗
2、無從得知webview渲染完畢的時機
3、使用pop-in應(yīng)該將動畫延長到200-300毫秒，讓切換效果更流暢
三、打開新窗口方法
1、head、body分開載入
（1）先顯示帶有標(biāo)題欄的head頁面，content中顯示"加載中..."或者顯示SVG動畫
（2）通知body頁面執(zhí)行ajax拉取數(shù)據(jù)渲染頁面，渲染完畢append到head頁面上
2、頁面渲染后再切換
（1）點擊后顯示等待框
（2）通知show頁面執(zhí)行ajax拉取數(shù)據(jù)渲染頁面
（3）渲染代碼結(jié)束后，延遲50ms關(guān)閉等待框，顯示出show頁面。
3、預(yù)加載頁面直接切換
（1）點擊后切換到預(yù)加載的頁面
（2）顯示等待框，執(zhí)行ajax拉取數(shù)據(jù)渲染頁面
（3）渲染代碼結(jié)束后，關(guān)閉等待框
注：此種方法為了避免打開新的頁面數(shù)據(jù)不對，需要監(jiān)聽重寫mui.back()，清空頁面的所有數(shù)據(jù)。
總結(jié)
以上所述是小編給大家介紹的mui 打開新窗口的方式總結(jié)及注意事項，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了微信小程序獲取當(dāng)前時間及日期的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Javascript實現(xiàn)可旋轉(zhuǎn)的圓圈實例代碼
這篇文章主要介紹了Javascript實現(xiàn)可旋轉(zhuǎn)的圓圈實例代碼,可實現(xiàn)圓圈的旋轉(zhuǎn)與運動效果,涉及javascript動態(tài)操作頁面元素屬性及進行相應(yīng)數(shù)學(xué)運算的技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)pc端輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用
不管是vue還是react中,都在強調(diào)組件思想，所以下面這篇文章主要給大家介紹了關(guān)于微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用的相關(guān)資料，需要的朋友可以參考下2021-05-05
JS+CSS實現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動態(tài)操作頁面元素屬性的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JavaScript中DOM和BOM原理詳析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導(dǎo)航菜單
這篇文章主要介紹了基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導(dǎo)航菜單,通過調(diào)用js插件實現(xiàn)導(dǎo)航效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JS指定音頻audio在某個時間點進行播放,獲取當(dāng)前音頻audio的長度,音頻時長格式轉(zhuǎn)化,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
CSS3+JavaScript實現(xiàn)翻頁幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實現(xiàn)翻頁幻燈片效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06