有些事情經(jīng)歷過之后才會發(fā)現(xiàn)，原來再次之前我是如此的啥，因為是第一次做，毫無頭緒，有時會想假如有個一demo就好了，那么就不會花費這么多的無用功了。今天使用mui 的webview實現(xiàn)了一個H5頁面的上拉加載下拉刷新的效果，拿出來和大家一起分享一下，希望各位博友有用，當(dāng)然啦有的時候坑會很多，但是只要我們學(xué)會用思考的方式去找問題，不管是什么問題我們都是可以解決的。小弟的文采不好，有錯誤請指出來，一定虛心接受

　　

//首先在此之前我們先要引用jquery的插件，以及mui.js插件 <!--html代碼--> <!--需要加載的容器--><div class="shop-list font-16 col-1 mui-scroll-wrapper mui-content" id="refreshContainer"> <!--mui-scroll是否允許滑動--> <div class="mui-scroll"> <!--重點mui-table-view mui-table-view-chevron這里是頁面加載那些的文字樣式--> <ul class="mui-table-view mui-table-view-chevron" id="list"> </ul> </div> </div>
<!--MUIWEBvIEW分頁--> <script type="text/javascript"> $(function () {//需要顯示的條數(shù) var size = 3;//頁碼 var page = 1; //下拉刷新監(jiān)聽事件（這里可以直接去mui文檔中復(fù)制） mui.init({ pullRefresh: { container: '#refreshContainer',
//下拉刷新 down: { height: 50,//可選,默認(rèn)50.觸發(fā)下拉刷新拖動距離, auto:false,//可選,默認(rèn)false.自動上拉加載一次 callback: function () {//必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)； //5毫秒顯示 window.setTimeout(function () { //向下刷新重新賦值 page = 1; size = 3; //調(diào)用獲取數(shù)據(jù)的方法 DtGetData(size, page);

? //結(jié)束向下加載數(shù)據(jù)的提示的重點
? mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
? //最近發(fā)現(xiàn)的bug當(dāng)每次重新向下刷新一次的時候總是會默認(rèn)執(zhí)行一次向下加載因此
? //結(jié)束上拉加載endpulluptorefresh有更多數(shù)據(jù)傳入false無則為true
? //mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

}, 500); } }, //END 下拉刷新 up: { height: 50,//可選,默認(rèn)50.觸發(fā)下拉刷新拖動距離, auto:true, contentrefresh: "正在加載...",//可選，正在加載狀態(tài)時，上拉加載控件上顯示的標(biāo)題內(nèi)容 contentnomore: '沒有更多數(shù)據(jù)了',//可選，請求完畢若沒有更多數(shù)據(jù)時顯示的提醒內(nèi)容； callback: function () {//必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)； window.setTimeout(function () { //調(diào)用加載更多數(shù)據(jù)的方法

DtGetData(size, page);
}, 500); //END 上拉加載 } } } }); //獲取對應(yīng)的數(shù)據(jù) function DtGetData(a, b) { //mui展示數(shù)據(jù)的方法 mui.ajax("api接口", { data: { 'size': a, 'page': b }, dataType: 'json', type: 'post', headers: { 'Content-Type': 'application/json' }, success: function (data) { $("#list").html(""); //是否結(jié)束向上加載數(shù)據(jù)是傳入false否傳入true mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //獲取json格式的數(shù)據(jù) var returnData = data.List; //html dom屬性 var element = document.getElementById("list"); //html標(biāo)簽遍歷 for (var i = 0; i < returnData.length; i++) { $("#list").append("這里是綁定你在后臺調(diào)取出來的數(shù)據(jù)"); } //分頁 var PageSize; //獲取總頁數(shù) if ((data.Total % size) > 0) { PageSize = (data.Total / size) + 1; } else { //能整除 PageSize = (data.Total / size); } if (PageSize < page) { //當(dāng)前顯示數(shù)量大于總數(shù)時，停止上拉下拉結(jié)束轉(zhuǎn)雪花進(jìn)度條的“正在加載...”過程//停止下拉刷新（禁用上拉加載） mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
//可以繼續(xù)向上加載數(shù)據(jù) mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); mui.toast("沒有更多的數(shù)據(jù)") } else { page++; if (PageSize <page) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); mui('#refreshContainer').pullRefresh().disablePullupToRefresh(); mui.toast("暫無更多數(shù)據(jù)"); } else { //有重新觸發(fā)上拉加載的需求mui('#refreshContainer').pullRefresh().refresh(true); }}}, error: function (xhr, type, errorThrown) { //異常處理； console.log(type); } })} //在方法為進(jìn)行事件監(jiān)聽，在方法里面會疊加多次執(zhí)行 //監(jiān)聽tap時間解決頁面href超鏈接不跳轉(zhuǎn)的問題 mui('body').on('tap', 'a', function () {
document.location.href = this.href;
}); //解決mui屏蔽點擊事件的bug,通過添加對應(yīng)控件的點擊事件 mui("#refreshContainer").on('tap', '.kedianji', function (event)
{ this.click(); }); })
</script>

效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/Can-daydayup/p/9094388.html

總結(jié)

以上是生活随笔為你收集整理的Mui Webview下来刷新上拉加载实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。