做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据:
方式一:使用dropload.js;
配置好相关参数及回调函数就可使用:代码如下
var paging = 1;//页码数
//初始化展示第一页数据
$.ajax({
type: 'GET',
url: "code"+paging+".json",
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.length; i++){
result += "<tr><td>"+data[i].qy+"</td><td>"+data[i].num+"</td><td>"+data[i].total+"</td></tr>";
}
$('#code-table').append(result);
}
});
// dropload函数接口设置
$(".code-table").dropload({
scrollArea : window,
domDown : {
domClass : 'dropload-down',
// 滑动到底部显示内容
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
// 内容加载过程中显示内容
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
// 没有更多内容-显示提示
domNoData : '<div class="dropload-noData">无更多数据</div>'
},
loadDownFn : function(me){
paging++; // 每次请求，页码加1
$(".code-table").css("height","auto");//容器初始化时我设置了高度,当加载更多时应该去掉,让内容撑开
$.ajax({
type: 'GET',
url: "code"+paging+".json", //分段模拟数据,json文件
dataType: 'json',
success: function(data){
// data = JSON.parse(data);
var result = '';
// 选择需要显示的数据 拼接 DOM
for(var i = 0; i < data.length; i++){
result += "<tr><td>"+data[i].qy+"</td><td>"+data[i].num+"</td><td>"+data[i].total+"</td></tr>";
}
if(data.length<9){
// 再往下已经没有数据
// 锁定
me.lock();
// 显示无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 加载 插入到原有 DOM 之后
$('#code-table').append(result);
// 每次数据加载完，必须重置
me.resetload();
},1000);
},
// 加载出错
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
dropload下拉刷新等更多详情可参考:http://www.jianshu.com/p/65c718093d44;
方法二:利用移动端touch事件(貌似originalEvent事件需要jq2.0+版本)自定义方法(欢迎纠正);
方法代码:
var $Od=$(document);//触摸对象
2 var pIndex=1; //页码数
var pSize=6; //每页数据个数
var flag=1; //为了防止重复滑动导致数据错乱,我设置了一个标记,为1时上拉有效,为0无效
function sliderMore(){
//触摸事件开始
$Od.on('touchstart.mo',function(ev){
//获取手指触摸列表,[0]代表第一个像素点
var touch = ev.originalEvent.changedTouches[0];
var disy1 = touch.pageY; //记录当前位置
//开始滑动
$Od.on('touchmove.mo',function(ev){ })
//抬起手指结束事件
$Od.on('touchend.mo',function(ev){
if(flag){
//再次获取手指触摸列表,[0]代表第一个像素点,并记录位置
var touch = ev.originalEvent.changedTouches[0];
var disy2 = touch.pageY;
//判断条件为上拉
if((disy1-disy2)>20){
flag=0;//开始上拉设置重复上拉无效 pIndex++;//每次请求页码+1
$('#tips').html("加载中..."); //样式,可自定义
//下面是本人写的ajax请求数据,可自定义
var startVal = $("#dstart").val();
var endVal = $("#dend").val();
var data = {
"method":"get_activated_code_info",
"start_time":startVal,
"end_time":endVal,
"page_index":pIndex,
"page_size":pSize
};
data = JSON.stringify(data);
ajaxCall(data,function(result){
//为了测试,延时展现数据效果
setTimeout(function(){
//将请求结果展现出来
for(var i in result.items){
addItem(result.items[i].company_name,result.items[i].code_activated,result.items[i].activated_amount);
}
$('#tips').html("上拉加载更多");
//判断请求的结果有没有数据,没有就改变提示内容
if(result.items.length==0){
console.log(245);
$('#tips').html("无更多数据");
}
},500);
//要在数据展示出来之后,再将flag设为1,所以这里时间1000>500,这里可以只要一个定时器(就不改了),可以遍历数据不需放在定时器里,遍历用个变量保存,然后定时一次加入容器同时flag=1;
setTimeout(function(){
flag=1;
},1000);
});
}
}
})
})
}
sliderMore();