您的位置:首页 > Web前端 > JQuery

jQuery+AJAX实现无刷新分页滚动下拉加载

2017-06-14 15:25 741 查看
$(function(){

var page = 1;
var innerHeight = window.innerHeight;
var timer2 = null;

var dynamictype = getUrlParam('account');
var tcontent = getUrlParam('tcontent');
var start = getUrlParam('start');
var end = getUrlParam('end');
var uid = getUrlParam('uid');

$.ajax({
type: 'POST',
url: pnUrl()+"xxxxx/dynamicList",
data: {tcontent:tcontent,uid:uid,dynamictype:dynamictype,start:start,end:end,page:page},
timeout: '5000',
cache: 'false',
dataType: 'json',
success: function(data){
if (data.success == true) {
var result = '';

for(var i=0;i < data.data.list.length; i++){

result += '<div class="social-feed-box">\
<div class="pull-right social-action dropdown">\
<button data-toggle="dropdown" class="dropdown-toggle btn-white">\
<i class="fa fa-angle-down"></i>\
</button>\
<ul class="dropdown-menu m-t-xs">\
<li><a href="javascript:" onclick="dshield('+data.data.list[i].id+','+data.data.list[i].is_show+');">'+is_show(data.data.list[i].is_show)+'</a></li>\
</ul>\
</div>\
<div class="social-avatar">\
<a href="javascript:" class="pull-left">\
<img alt="image" src="'+data.data.list[i].head_img+'">\
</a>\
<div class="media-body">\
<a>\
'+data.data.list[i].nickname+'\
<span class="label-danger">'+isshow(data.data.list[i].is_show)+'</span>\
</a>\
<small class="text-muted">'+timetrans(data.data.list[i].created_at)+'</small>\
</div>\
</div>\
<div class="social-body">\

4000
<p class="well">\
'+decodeURIComponent(data.data.list[i].tcontent)+'\
</p>\
<a class="'+isimgs(data.data.list[i].imgfile)+'" href="'+data.data.list[i].imgfile+'"  title="图片"><img src="'+data.data.list[i].imgfile+'" class="img-responsive"></a>\
<div class="pic">\
<a  href="javascript:" onclick="videofile('+data.data.list[i].id+');"  title="点击查看视频">\
<img src="'+data.data.list[i].vcover+'" class="img-responsive">\
<span>'+isvideo(data.data.list[i].dynamictype)+'</span>\
</a>\
</div>\
<div class="btn-group">\
<button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> '+data.data.list[i].kissnums+'赞</button>\
<button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> '+data.data.list[i].commentnums+'评论</button>\
<button class="btn btn-white btn-xs"><i class="fa fa-share"></i> '+data.data.list[i].forwardnums+'分享</button>\
</div>\
</div>\
</div>';

}

$('.dylist').append(result);
}

var p=0,t=0;
$(window).scroll(function(e) {
clearTimeout(timer2);
timer2 = setTimeout(function() {
p = $(this).scrollTop();
page++;
if(t<=p){//下滚
$.ajax({
type: 'POST',
url: pnUrl()+"xxxxx/dynamicList",
data: {tcontent:tcontent,uid:uid,dynamictype:dynamictype,start:start,end:end,page:page},
dataType: 'json',
success: function(data){
if(data.success==true){
var result = '';
for(var i=0;i < data.data.list.length; i++){

result += '<div class="social-feed-box">\
<div class="pull-right social-action dropdown">\
<button data-toggle="dropdown" class="dropdown-toggle btn-white">\
<i class="fa fa-angle-down"></i>\
</button>\
<ul class="dropdown-menu m-t-xs">\
<li><a href="javascript:" onclick="dshield('+data.data.list[i].id+','+data.data.list[i].is_show+');">'+is_show(data.data.list[i].is_show)+'</a></li>\
</ul>\
</div>\
<div class="social-avatar">\
<a href="javascript:" class="pull-left">\
<img alt="image" src="'+data.data.list[i].head_img+'">\
</a>\
<div class="media-body">\
<a>\
'+data.data.list[i].nickname+'\
<span class="label-danger">'+isshow(data.data.list[i].is_show)+'</span>\
</a>\
<small class="text-muted">'+timetrans(data.data.list[i].created_at)+'</small>\
</div>\
</div>\
<div class="social-body">\
<p class="well">\
'+decodeURIComponent(data.data.list[i].tcontent)+'\
</p>\
<a class="'+isimgs(data.data.list[i].imgfile)+'" href="'+data.data.list[i].imgfile+'"  title="图片"><img src="'+data.data.list[i].imgfile+'" class="img-responsive"></a>\
<div class="pic">\
<a  href="javascript:" onclick="videofile('+data.data.list[i].id+');"  title="点击查看视频">\
<img src="'+data.data.list[i].vcover+'" class="img-responsive">\
<span>'+isvideo(data.data.list[i].dynamictype)+'</span>\
</a>\
</div>\
<div class="btn-group">\
<button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> '+data.data.list[i].kissnums+'赞</button>\
<button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> '+data.data.list[i].commentnums+'评论</button>\
<button class="btn btn-white btn-xs"><i class="fa fa-share"></i> '+data.data.list[i].forwardnums+'分享</button>\
</div>\
</div>\
</div>';
}
$('.dylist').append(result);
}else{
$(window).unbind('scroll');
}
}
});
}else{ } //上滚
t = p;
}, 200);
}) 

},error:function(data){

}
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: