提升HTML5的效能體驗系列之三 流暢下拉重新整理和上拉

標籤：代碼   實現   app   cloud   cat   dcl   time   android手機   hello   

　　

下拉重新整理

為實現下拉重新整理功能，大多H5架構都是通過DIV類比下拉回彈動畫，在低端android手機（Android4.4以下）上，DIV動畫經常出現卡頓現象（特別是圖文列表的情況）。
解決方案還是webview。

既然拉div卡，那就不拉div，改拉webview。webview的拉動是原生的，回彈效果也是原生的，體驗與原生一致。
思路是在父頁面寫titlebar，titlebar下面10像素左右寫一個“下拉可重新整理”。
然後append一個子webview，並設定為可下拉。
那麼在把子webview往下拉時，會露出父頁面的“下拉可重新整理”字樣，並且在拉到一定距離後會觸發一個事件，js捕獲到這個事件後可以更改“下拉可重新整理”為“鬆開可重新整理”。同樣鬆開也會觸發一個事件。

目前這個方案僅在Android上實現，iOS不存在效能問題，仍然可通過DIV拉動實現。

為了方便開發人員一套代碼解決問題，mui架構對2種方案進行了統一封裝。
參考：http://dev.dcloud.net.cn/mui/pulldown/

當然iOS的5+runtime也支援和Android一樣的原生下拉重新整理，對iOS上div方式不滿意的同學也可以直接使用原生下拉重新整理，只是樣式沒法自訂。

上拉翻頁

App裡很常見的列表是滾到最下面時載入下一頁內容。
傳統的思路裡，是依靠js監聽捲軸位置來實現。這導致任意滾動列表時，都會造成這個監聽事件觸發，容易引發列表滑動卡頓。
HTML5Plus擴充了一個事件，是原生的下拉到底事件，在webview捲軸到底部時會自動觸發。
這樣js只需監聽這個拉到底事件即可，提升了App的執行效能。
5+ API參考：http://www.html5plus.org/#specification#/specification/Events.html
MUI封裝參考：http://dev.dcloud.net.cn/mui/pullup/

這些程式碼範例在Hello H5+和Hello mui中都有。

提升HTML5的效能體驗系列之三 流暢下拉重新整理和上拉