MUI 下拉刷新

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

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

index.html:

主頁(yè)面和子頁(yè)面解決滾動(dòng)卡頓的問(wèn)題

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

list.html

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

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