為實現(xiàn)下拉刷新功能，大多H5框架都是通過DIV模擬下拉回彈動畫，在低端android手機上，DIV動畫經(jīng)常出現(xiàn)卡頓現(xiàn)象（特別是圖文列表的情況）； mui通過雙webview解決這個DIV的拖動流暢度問題；拖動時，拖動的不是div，而是一個完整的webview（子webview），回彈動畫使用原生動畫；在iOS平臺，H5的動畫已經(jīng)比較流暢，故依然使用H5方案。兩個平臺實現(xiàn)雖有差異，但mui經(jīng)過封裝，可使用一套代碼實現(xiàn)下拉刷新。 MUI本身是在IOS UI的基礎上拓展Android的。所以在IOS上的適合度高于安卓。

例子：有index.html 和 list.html兩個頁面，list用于存放數(shù)據(jù)，而index主要作為一個框架存放頭部和尾部。

index.html:

主頁面和子頁面解決滾動卡頓的問題

mui.init({
		????subpages:[{
		??????url:'list.html',//下拉刷新內(nèi)容頁面地址
		??????id:'haha',//內(nèi)容頁面標志
		??????styles:{
		????????top:'40px',
		????????bottom:'0px'
		??????}
		????}]??
??});

list.html

	mui.init({
				pullRefresh?:?{
		????container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
		????down?:?{
		??????height:50,//可選,默認50.觸發(fā)下拉刷新拖動距離,
		??????auto:?true,//可選,默認false.自動下拉刷新一次
		??????contentdown?:?"下拉可以刷新",//可選，在下拉可刷新狀態(tài)時，下拉刷新控件上顯示的標題內(nèi)容
		??????contentover?:?"釋放立即刷新",//可選，在釋放可刷新狀態(tài)時，下拉刷新控件上顯示的標題內(nèi)容
		??????contentrefresh?:?"正在刷新...",//可選，正在刷新狀態(tài)時，下拉刷新控件上顯示的標題內(nèi)容
		?????callback?:show?//必選，刷新函數(shù)，根據(jù)具體業(yè)務來編寫，比如通過ajax從服務器獲取新數(shù)據(jù)；
		????
		????
		??}}
		????
				
				
			});
			function?show()
			{
				console.log(1);//這里用來寫邏輯，從服務器上獲取最新數(shù)據(jù)并更新
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();//下拉刷新結束之后?；氐巾敳?				
			}

Item?111111Item?2Item?3Item?1Item?2Item?1Item?1Item?9