mui下拉重新整理

2021-09-24 06:12:44 字數 1126 閱讀 6240

概述:為實現下拉重新整理功能,大多數 h5 框架都是通過 div 模擬下拉回彈動畫,在低端 android 手機上,div 動畫經常出現卡頓現象(特別是**列表的情況); mui 通過使用原生 webview 下拉重新整理解決這個 div 動畫的卡頓問題,並且拖動效果更加流暢;

這裡提供兩種模式的下拉重新整理,以適用不同場景:

單webview 模式和雙 webview 模式

單webview 模式的優點:

效能更優,體現在兩點:

相比雙webview,不建立額外子 webview 效能消耗更少

下拉拖動過程中不會發生重繪,也減少了效能消耗

缺點:目前僅支援『cricle』樣式以及該樣式的顏色自定義

雙webview 模式的優點:

可自定義下拉重新整理樣式,更改文字等等.參考關於自定義下拉重新整理樣式問答

缺點:相比單 webview,效能消耗更大,不過都比 div 模式的要好用

dom結構需要統一配置

下面說下雙 webview 模式的例子

動畫原理:

使用雙 webview 模式的下拉重新整理,建立乙個子 webview 新增列表;拖動時,拖動的是乙個完整的 webview,避免了類似 div 拖動流暢度不好的問題,回彈動畫使用原生動畫;在 ios 平台,h5 的動畫已經比較流暢,故依然使用 h5 方案。兩個平台實現雖有差異,但 mui 經過封裝,可使用一套**實現下拉重新整理。

使用方法:

主頁面內容比較簡單,只需要建立子頁面即可

其次,通過 mui.init 方法中 pullrefresh 引數配置下拉重新整理各項引數,如下:

mui.init( }

});下拉重新整理結束

兩種模式在下拉重新整理過程中,當獲取新資料後,都需要執行 endpulldown 方法, 該方法的作用是關閉「正在重新整理」的樣式提示,內容區域回滾頂部位置,如下:

function

callfunction

() ,

1000);

}

MUI 下拉重新整理

為實現下拉重新整理功能,大多h5框架都是通過div模擬下拉回彈動畫,在低端android手機上,div動畫經常出現卡頓現象 特別是 列表的情況 mui通過雙webview解決這個div的拖動流暢度問題 拖動時,拖動的不是div,而是乙個完整的webview 子webview 回彈動畫使用原生動畫 在...

mui 下拉重新整理 上拉載入

動態禁止和恢復上下拉重新整理 留著做個demo 需要暫時禁止和恢復上下拉重新整理,我的初始化 如下 mui.init pullrefresh down 當我更改pullrefresh中的container為空 的時候,上下拉可以不起作用,但我需要在執行時臨時禁止和使能上下拉,試過如下的方法均不起作用...

mui上拉重新整理下拉載入

mui 上拉重新整理下拉載入 這裡我用到了乙個自己封裝的工具類來調mui post方法的 大家也可以用mui本身自己去呼叫 1.html 2.script var commonhelp new commonhelp mui.init up var pageno 1 var pagesize 5 上拉...