mui 打開新窗口的方式總結(jié)及注意事項(xiàng)

一、什么是良好的用戶體驗(yàn)（淘寶、易迅）

1、預(yù)加載截圖方式：點(diǎn)擊、切換模版窗口、顯示等待框、執(zhí)行ajax并渲染、顯示數(shù)據(jù)、關(guān)閉等待框。

2、head、body分開載入方式：點(diǎn)擊、切換窗口顯示等待中、執(zhí)行ajax并渲染頁面、將渲染好的頁面append到body中。

3、lazyload等方式感覺太貼近網(wǎng)頁，就不算在良好用戶體驗(yàn)內(nèi)了。

二、注意事項(xiàng)

1、窗口切換時(shí)執(zhí)行并發(fā)任務(wù)（ajax請(qǐng)求或渲染頁面）會(huì)影響體驗(yàn)

2、無從得知webview渲染完畢的時(shí)機(jī)

3、使用pop-in應(yīng)該將動(dòng)畫延長(zhǎng)到200-300毫秒，讓切換效果更流暢

三、打開新窗口方法

1、head、body分開載入

（1）先顯示帶有標(biāo)題欄的head頁面，content中顯示"加載中..."或者顯示SVG動(dòng)畫

（2）通知body頁面執(zhí)行ajax拉取數(shù)據(jù)渲染頁面，渲染完畢append到head頁面上

2、頁面渲染后再切換

（1）點(diǎn)擊后顯示等待框

（2）通知show頁面執(zhí)行ajax拉取數(shù)據(jù)渲染頁面

（3）渲染代碼結(jié)束后，延遲50ms關(guān)閉等待框，顯示出show頁面。

3、預(yù)加載頁面直接切換

（1）點(diǎn)擊后切換到預(yù)加載的頁面

（2）顯示等待框，執(zhí)行ajax拉取數(shù)據(jù)渲染頁面

（3）渲染代碼結(jié)束后，關(guān)閉等待框

注：此種方法為了避免打開新的頁面數(shù)據(jù)不對(duì)，需要監(jiān)聽重寫mui.back()，清空頁面的所有數(shù)據(jù)。

總結(jié)

以上所述是小編給大家介紹的mui 打開新窗口的方式總結(jié)及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！