為實(shí)現(xiàn)下拉刷新功能,大多H5框架都是通過DIV模擬下拉回彈動(dòng)畫,在低端android手機(jī)上,DIV動(dòng)畫經(jīng)常出現(xiàn)卡頓現(xiàn)象(特別是圖文列表的情況); mui通過雙webview解決這個(gè)DIV的拖動(dòng)流暢度問題;拖動(dòng)時(shí),拖動(dòng)的不是div,而是一個(gè)完整的webview(子webview),回彈動(dòng)畫使用原生動(dòng)畫;在iOS平臺,H5的動(dòng)畫已經(jīng)比較流暢,故依然使用H5方案。兩個(gè)平臺實(shí)現(xiàn)雖有差異,但mui經(jīng)過封裝,可使用一套代碼實(shí)現(xiàn)下拉刷新。 MUI本身是在IOS UI的基礎(chǔ)上拓展Android的。所以在IOS上的適合度高于安卓。
例子:有index.html 和 list.html兩個(gè)頁面,list用于存放數(shù)據(jù),而index主要作為一個(gè)框架存放頭部和尾部。
index.html:
主頁面和子頁面解決滾動(dòng)卡頓的問題
mui.init({ ????subpages:[{ ??????url:'list.html',//下拉刷新內(nèi)容頁面地址 ??????id:'haha',//內(nèi)容頁面標(biāo)志 ??????styles:{ ????????top:'40px', ????????bottom:'0px' ??????} ????}]?? ??});
list.html
mui.init({ pullRefresh?:?{ ????container:"#refreshContainer",//下拉刷新容器標(biāo)識,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ù)來編寫,比如通過ajax從服務(wù)器獲取新數(shù)據(jù); ???? ???? ??}} ???? }); function?show() { console.log(1);//這里用來寫邏輯,從服務(wù)器上獲取最新數(shù)據(jù)并更新 mui('#refreshContainer').pullRefresh().endPulldownToRefresh();//下拉刷新結(jié)束之后?;氐巾敳? }
Item?111111Item?2Item?3Item?1Item?2Item?1Item?1Item?9