html页面滑动到底自动调用ajax数据加载下一页

html页面滑动到底自动调用ajax数据加载下一页

页面数据是已经调取ajax数据后展示的,页面滑动到底部需要做个判断,然后再次调用该接口数据,实现展示下一页数据;
通过下面的方法检测滑动到底部


$(window).scroll(function(){
  if (Math.round($(window).scrollTop() + $(window).height()) == $(document).height()) {
      //滑动到底部了
  }
 });

首次调用接口成功后保存下来需要的页面数据,比如current;再次调用接口是将current+1,并传入接口;
代码示例如下:

var c_url = 'pai';//公共接口
$.ajax({
	type:"GET",
	url:c_url+'/article/page',
	dataType: "json",
	success: function(res){
	
	    //这里在html渲染后台数据的操作
	    
	    var current = res.data.current;//将数据保存在current中
       	$(window).scroll(function(){
          if (Math.round($(window).scrollTop() + $(window).height()) == $(document).height()) {
              current++;
               $.ajax({
                   type:"GET",
                   url:c_url+'/article/page?current='+current,
                   dataType: "json",
                   success: function(res){
                      //此时调用的current+1后的数据
                      //在这里进行操作,将数据渲染到html页面即可;
                    }
               });
          }
       });
     }
});

猜你喜欢

转载自blog.csdn.net/qq_34301849/article/details/89641971