提高html5的性能體驗系列之三流暢下拉刷新

下拉刷新

爲實現下拉刷新功能，大多H5框架都是經過DIV模擬下拉回彈動畫，在低端android手機（Android4.4如下）上，DIV動畫常常出現卡頓現象（特別是圖文列表的狀況）。
解決方案仍是webview。

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

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

爲了方便開發者一套代碼解決問題，mui框架對2種方案進行了統一封裝。
參考：http://dcloudio.github.io/mui/javascript/#pullrefresh-down

固然iOS的5+runtime也支持和Android同樣的原生下拉刷新，對iOS上div方式不滿意的同窗也能夠直接使用原生下拉刷新，只是樣式無法自定義。

上拉翻頁

App裏很常見的列表是滾到最下面時載入下一頁內容。
傳統的思路里，是依靠js監聽滾動條位置來實現。這致使任意滾動列表時，都會形成這個監聽事件觸發，容易引起列表滑動卡頓。
HTML5Plus擴展了一個事件，是原生的下拉到底事件，在webview滾動條到底部時會自動觸發。
這樣js只需監聽這個拉到底事件便可，提高了App的執行性能。