Mui Webview下來刷新上拉加載實現

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

　　

//首先在此之前我們先要引用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 () {
 //需要顯示的條數
var size = 3;
 //頁碼
var page = 1;
//下拉刷新監聽事件（這里可以直接去mui文檔中復制）
mui.init({
pullRefresh: {
container: '#refreshContainer',
//下拉刷新
down: {
height: 50,//可選,默認50.觸發下拉刷新拖動距離,
auto:false,//可選,默認false.自動上拉加載一次
callback: function () {//必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
//5毫秒顯示
window.setTimeout(function () {
//向下刷新重新賦值 
page = 1;
size = 3;
//調用獲取數據的方法
DtGetData(size, page);

  //結束向下加載數據的提示的重點
  mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
  //最近發現的bug當每次重新向下刷新一次的時候總是會默認執行一次向下加載因此
  //結束上拉加載endpulluptorefresh有更多數據傳入false無則為true
  //mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

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

DtGetData(size, page);

}, 500); //END 上拉加載
}
}
}
});
//獲取對應的數據
function DtGetData(a, b) {
//mui展示數據的方法
mui.ajax("api接口", {
data: { 'size': a, 'page': b },
dataType: 'json',
type: 'post',
headers: { 'Content-Type': 'application/json' },
success: function (data) {
$("#list").html("");
//是否結束向上加載數據是傳入false否傳入true
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//獲取json格式的數據 
var returnData = data.List;
//html dom屬性
var element = document.getElementById("list");
//html標簽遍歷
for (var i = 0; i < returnData.length; i++) {  
$("#list").append("這里是綁定你在后台調取出來的數據");
}
//分頁
var PageSize;
//獲取總頁數
if ((data.Total % size) > 0) {
PageSize = (data.Total / size) + 1;
}
else {
//能整除
PageSize = (data.Total / size);
}
if (PageSize < page) {
//當前顯示數量大於總數時，停止上拉下拉結束轉雪花進度條的“正在加載...”過程//停止下拉刷新（禁用上拉加載）
mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
//可以繼續向上加載數據
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
mui.toast("沒有更多的數據")
}
else {
page++;
if (PageSize <page) {

mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
mui.toast("暫無更多數據");
}
else {
//有重新觸發上拉加載的需求
 mui('#refreshContainer').pullRefresh().refresh(true);
}}},
error: function (xhr, type, errorThrown) {
//異常處理；
console.log(type);
}
})}      
//在方法為進行事件監聽，在方法里面會疊加多次執行
//監聽tap時間解決頁面href超鏈接不跳轉的問題 
mui('body').on('tap', 'a', function ()
{ 
document.location.href = this.href; 
});
//解決mui屏蔽點擊事件的bug,通過添加對應控件的點擊事件
mui("#refreshContainer").on('tap', '.kedianji', function (event) 
{
this.click();
});
})
</script>

效果圖：