Jquery下拉异步刷新

1、首先我们要获取浏览器可视区域页面的的高度

var winH = $(window).height(); //页面可视区域高度 

2、然后,当滚动页面需要做的事情是:计算页面总高度(当滚动到底部时,页面加载新数据,所以页面总高度是动态变化的),计算滚动条位置(位置也是动态变化的),然后构造一个公式,计算相对比例

$(window).scroll(function () { 
    var pageH = $(document.body).height(); 
    var scrollT = $(window).scrollTop(); //滚动条top 
    var aa = (pageH-winH-scrollT)/winH;
   )};

3、当滚动条接近页面底部时,触发ajax加载,想服务器端请求数据

4、解析返回的json数据到网页中

if(aa<0.02){

      $.getJSON("result.php",{page:i},function(json){

        if(json){

          varstr = "";

          $.each(json,function(index,array){

            varstr = "<div class=\"single_item\"><divclass=\"element_head\">";

            varstr += "<divclass=\"date\">"+array['date']+"</div>";

            varstr += "<divclass=\"author\">"+array['author']+"</div>";

            varstr += "</div><divclass=\"content\">"+array['content']+"</div></div>";

            $("#container").append(str);

          });

          i++;

        }else{

          $(".nodata").show().html("别滚动了,已经到底了。。。");

          return false;

        }   

  }); 

  }  

}); 






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值