文章目录
##插件链接http://www.mescroll.com/api.html?v=66
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
up: {
page:{
num:0,//当前页
size:10//每页数据条数
},
auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
toTop:{ //配置回到顶部按钮
src : "${ctx}/image/mobile/groupbuy/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}
}
});
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page){
curPage=page.num;
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
mescroll.endSuccess(curPageData.length);
//提示:curPageData.length必传的原因:
// 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
// 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
// 3.使配置的noMoreSize生效
//设置列表数据
setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData, isAppend) {
var listDom=document.getElementById("newsList");
for (var i = 0; i < curPageData.ordOrders.length; i++) {
var newObj=curPageData.ordOrders[i];
var str='';
str+="<a href='details.html'>\n"+
"<div class='group_list_time'>\n"
+" <div class='group_time clearfix' id='pd_time"+((curPage-1)*10+i+1)+"' beginDate='"+newObj.groupbuyBuybegindate+"' endDate='"+newObj.groupbuySellenddate+"'>\n"
/*+" <p>团购结束倒计时</p>\n"*/
+'</div>'
+'</div>';
if(newObj.categoryid==null){
str+='<img src="${ctx }/image/crowdfunding/suger/suger-middle-67.jpg" alt="">';
}else{
str+='<img src="${ctx }/image/crowdfunding/suger/suger-middle-'+newObj.categoryid+'.jpg" alt="">';
}
str+=' <div class="group_txt">'
+' <h2>'+newObj.content+'</h2>'
+'<p>团购品类: <b>糖类</b></p>'
+'</div>\n'
+'</a>';
var liDom=document.createElement("li");
liDom.innerHTML=str;
if (isAppend) {
listDom.appendChild(liDom);//加在列表的后面,上拉加载
} else{
listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
}
}
}
/*联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(function () {
try{
var param = {};
param.currentPage = pageNum;
param.pageSize = pageSize;
$.ajax({
url:"${ctx}/api/groupbuy/pageGroupbuyIndex",
type:'post',
data:param,
success:function(result){
if(result.code=='success'){
successCallback(result.data);
}
},
error:errorCallback
})
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
}
},100)//100毫秒后再请求,上拉刷新页面时数据未出来时有"加载中。。。"的效果
}
});