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

$(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">\
                                <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){

        }
    });

});

你可能感兴趣的:(jQuery+AJAX实现无刷新分页滚动下拉加载)