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)
}