html:
引入css
mescroll.min.css
scrollStyle.css
引入js
vue.min.js // 我是用vue所以引入
框架版 mescroll.m.js
原生版 mescroll.min.js
標簽結構
<section>
<div id="mescroll" class="mescroll" >
<div class="mescroll-bounce">
<div class="container relative">
<ul id="dataList" class="iListGroup">
//內容區域 可diy
<li class="overflow relative" v-for="(item,i) in pdlist">
<div class="left lf imgBgCover" :style="'background-image:url('+item.StoreLogo+')'">
<!--../../Content/Images/testImg/test1.png-->
<!--<img src="../../Content/Images/testImg/testShop1.png" class="imgScale" alt="">-->
</div>
<div class="right lf" >
<h5 class="ell">{{item.StoreName}}</h5>
<h6 class="ell2Line">預定時間：{{item.CreateTime}}</h6>
</div>
<div class="btnList">
<button class="btn1" @click="checkDal(item)">查看詳情</button>
<button class="btn2" @click="cancelOrder(item)">取消預定</button>
</div>
</li>
//內容區域 可diy
</ul>
</div>
</div>
</div>
</section>
js:
vue：
data中添加：pageIndex:1 //當前頁數
pageSize:10 //請求數量
pdlist //數據容器
生命周期mouted:
self.mescroll = new MeScroll("mescroll", {
up: {
callback: function(){self.getMyReserve(self.pageIndex,self.upCallback.bind(self))}, //上拉加載更多
//以下參數可刪除,不配置
page:{size:self.pageSize}, //可配置每頁8條數據,默認10
// toTop:{ //配置回到頂部按鈕
// src : "../res/img/mescroll-totop.png", //默認滾動到1000px顯示,可配置offset修改
// //offset : 1000
// },
empty:{ //配置列表無任何數據的提示
warpId:"dataList",
// icon : "../res/img/mescroll-empty.png" ,
tip : "親,暫無相關數據哦~" ,
// btntext : "去逛逛 >" ,
// btnClick : function() {
// alert("點擊了去逛逛按鈕");
// }
}
},
down: {//下拉刷新
callback: function(){self.getMyReserve(1,self.downCallback.bind(self))}, //下拉刷新
//以下參數可刪除,不配置
page:{size:self.pageSize}, //可配置每頁8條數據,默認10
// toTop:{ //配置回到頂部按鈕
// src : "../res/img/mescroll-totop.png", //默認滾動到1000px顯示,可配置offset修改
// //offset : 1000
// },
empty:{ //配置列表無任何數據的提示
warpId:"dataList",
// icon : "../res/img/mescroll-empty.png" ,
tip : "-End-" ,
// btntext : "去逛逛 >" ,
// btnClick : function() {
// alert("點擊了去逛逛按鈕");
// }
}
},
});
//初始化vue后,顯示vue模板布局
document.getElementById("dataList").style.display="block";
method:方法
getMyReserve: function(pageIndex,fun) { //請求內容
var data = {
PageIndex : pageIndex,
PageSize: this.pageSize,
};
ihotyi.iMyReserve(res=>{
if(res.Data){
this.pageIndex++;
fun && fun(res.Data);
}else
mAlert('返回data數據為空')
},data)
},
downCallback: function(curPageData) {//刷新
log('up')
this.pageIndex = 1;
//聯網加載數據
var self = this;
getListDataFromNet(self.pageIndex, self.pageSize, function() {
//curPageData=[]; //打開本行注釋,可演示列表無任何數據empty的配置
//如果是第一頁需手動制空列表
if(self.pageIndex === 1) self.pdlist = [];
//更新列表數據
self.pdlist = self.pdlist.concat(curPageData);
//聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
//mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空;列表無下一頁數據,則提示無更多數據;
//方法一(推薦): 后台接口有返回列表的總頁數 totalPage
//self.mescroll.endByPage(curPageData.length, totalPage); //必傳參數(當前頁的數據個數, 總頁數)
//方法二(推薦): 后台接口有返回列表的總數據量 totalSize
//self.mescroll.endBySize(curPageData.length, totalSize); //必傳參數(當前頁的數據個數, 總數據量)
//方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
//self.mescroll.endSuccess(curPageData.length, hasNext); //必傳參數(當前頁的數據個數, 是否有下一頁true/false)
//方法四 (不推薦),會存在一個小問題:比如列表共有20條數據,每頁加載10條,共2頁.如果只根據當前頁的數據個數判斷,則需翻到第三頁才會知道無更多數據,如果傳了hasNext,則翻到第二頁即可顯示無更多數據.
self.mescroll.endSuccess(curPageData.length);
}, function() {
//聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態;
self.mescroll.endErr();
});
},
upCallback: function(curPageData) {//加載更多
log('asdf');
//聯網加載數據
var self = this;
getListDataFromNet(self.pageIndex, self.pageSize, function() {
//curPageData=[]; //打開本行注釋,可演示列表無任何數據empty的配置
//如果是第一頁需手動制空列表
//更新列表數據
self.pdlist = self.pdlist.concat(curPageData);
//聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
//mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空;列表無下一頁數據,則提示無更多數據;
//方法一(推薦): 后台接口有返回列表的總頁數 totalPage
//self.mescroll.endByPage(curPageData.length, totalPage); //必傳參數(當前頁的數據個數, 總頁數)
//方法二(推薦): 后台接口有返回列表的總數據量 totalSize
//self.mescroll.endBySize(curPageData.length, totalSize); //必傳參數(當前頁的數據個數, 總數據量)
//方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
//self.mescroll.endSuccess(curPageData.length, hasNext); //必傳參數(當前頁的數據個數, 是否有下一頁true/false)
//方法四 (不推薦),會存在一個小問題:比如列表共有20條數據,每頁加載10條,共2頁.如果只根據當前頁的數據個數判斷,則需翻到第三頁才會知道無更多數據,如果傳了hasNext,則翻到第二頁即可顯示無更多數據.
self.mescroll.endSuccess(curPageData.length);
}, function() {
//聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態;
self.mescroll.endErr();
});
},
結構外定義function
getListDataFromNet
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延時一秒,模擬聯網
setTimeout(function () {
successCallback&&successCallback();//成功回調
// })
// .catch(function(error) {
// errorCallback&&errorCallback()//失敗回調
// });
},500)
}