MUI進行APP混合開發(fā)實現(xiàn)下拉刷新和上拉加載 原創(chuàng)
首先,我們的環(huán)境是使用HBuilder通過MUI開發(fā)APP,這種混合開發(fā)適合安卓和蘋果兩個平臺,本次我們給大家寫的代碼是把上拉加載和下拉刷新單獨分離開,一起來學習下。
為實現(xiàn)下拉刷新功能,大多H5框架都是通過DIV模擬下拉回彈動畫,在低端android手機上,DIV動畫經常出現(xiàn)卡頓現(xiàn)象(特別是圖文列表的情況); 通過雙webview解決這個DIV的拖動流暢度問題;拖動時,拖動的不是div,而是一個完整的webview(子webview),回彈動畫使用原生動畫;在iOS平臺,H5的動畫已經比較流暢,故依然使用H5方案。兩個平臺實現(xiàn)雖有差異,但經過封裝,可使用一套代碼實現(xiàn)下拉刷新。
第一步: 創(chuàng)建子頁面,因為拖動的其實是個子頁面的整體
mui.init({
subpages:[{
url:pullrefresh-subpage-url,//下拉刷新內容頁面地址
id:pullrefresh-subpage-id,//內容頁面標志
styles:{ top:subpage-top-position,//內容頁面頂部位置,需根據(jù)實際頁面布局計算,若使用標準mui導航,頂部默認為48px; .....//其它參數(shù)定義
}
}]
});
第二步:內容頁面需按照如下DOM結構構建
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--數(shù)據(jù)列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">1</li>
</ul>
</div>
</div>
第三步:通過mui.init方法中pullRefresh參數(shù)配置下拉刷新各項參數(shù)
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器標識,querySelector能定位的css選擇器均可,比如:id、.class等
down : {
contentdown : "下拉可以刷新",//可選,在下拉可刷新狀態(tài)時,下拉刷新控件上顯示的標題內容
contentover : "釋放立即刷新",//可選,在釋放可刷新狀態(tài)時,下拉刷新控件上顯示的標題內容
contentrefresh : "正在刷新...",//可選,正在刷新狀態(tài)時,下拉刷新控件上顯示的標題內容
callback : fn //必選,刷新函數(shù),根據(jù)具體業(yè)務來編寫,比如通過ajax從服務器獲取新數(shù)據(jù);
} }
});
第四步:設置執(zhí)行函數(shù)
function fn() {
//業(yè)務邏輯代碼,比如通過ajax從服務器獲取新數(shù)據(jù); ...... //注意,加載完新數(shù)據(jù)后,必須執(zhí)行如下代碼,注意:若為ajax請求,則需將如下代碼放置在處理完ajax響應數(shù)據(jù)之后
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //這行代碼會隱藏掉 正在加載... 容器
}
以上就是關于下拉刷新的MUI寫法以及相關的function 函數(shù),下面來看看下拉加載:
第一步,第二步 和下拉刷新的一樣
第三步:通過mui.init方法中pullRefresh參數(shù)配置下拉刷新各項參數(shù)
mui.init({
pullRefresh : {
container:"#pullrefresh",//待刷新區(qū)域標識,querySelector能定位的css選擇器均可,比如:id、.class等
up : {
contentrefresh : "正在加載...",//可選,正在加載狀態(tài)時,上拉加載控件上顯示的標題內容
contentnomore:'沒有更多數(shù)據(jù)了',//可選,請求完畢若沒有更多數(shù)據(jù)時顯示的提醒內容;
callback : fn //必選,刷新函數(shù),根據(jù)具體業(yè)務來編寫,比如通過ajax從服務器獲取新數(shù)據(jù);
}
}
});
第四步:設置執(zhí)行函數(shù)
function fn() {
//業(yè)務邏輯代碼,比如通過ajax從服務器獲取新數(shù)據(jù); ...... //注意,加載完新數(shù)據(jù)后,必須執(zhí)行如下代碼,true表示沒有更多數(shù)據(jù)了,
兩個注意事項: //1、若為ajax請求,則需將如下代碼放置在處理完ajax響應數(shù)據(jù)之后 //
2、注意this的作用域,若存在匿名函數(shù),需將this復制后使用
var _this = this;
_this.endPullupToRefresh(true|false);
}
上面就是上拉加載這個代碼的詳細寫法以及函數(shù)。
本次我們分開給大家把下拉刷新和上拉加載都給大家分享了,如果有任何不明白了地方,可以在下面的留言地方留言討論。
相關文章
Android編程錄音工具類RecorderUtil定義與用法示例
這篇文章主要介紹了Android編程錄音工具類RecorderUtil定義與用法,結合實例形式分析了Android錄音工具類實現(xiàn)開始錄音、停止錄音、取消錄音、獲取錄音信息等相關操作技巧,需要的朋友可以參考下2018-01-01
Android向node.js編寫的服務器發(fā)送數(shù)據(jù)并接收請求
這篇文章主要為大家詳細介紹了Android向node.js編寫的服務器發(fā)送數(shù)據(jù),并接收請求,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10
實例詳解android studio如何導入.so文件的方法
通過實例給大家詳細講解了如何在android studio如何導入.so文件以及中間遇到的問題解決辦法,需要的讀者們可以仔細學習一下。2017-12-12

