javascript - 前端js上拉刷新获取数据问题

Question

我第一次操作上拉，触发ajax进行加载数据，那我第二次再上拉的话，不就又重复加载了一次吗？如果用分页的话，我是怎么判断这是第几次上拉，更新哪页呢？

我表达的可能不是很好，如果哪里不明白可以说一下，最好能放一下实现源码，先谢谢各位了

Answer 1

 $( function(){
          var i=1;
        
         $(window).scroll( function(){
                  var scrollTop = 0;
                  var clientHeight = 0;
                  var scrollHeight = 0;
                  var replaceAppNo=$("input[name='replaceAppNo']" ).val();
                  if (document.documentElement && document.documentElement.scrollTop) {
                      scrollTop = document.documentElement.scrollTop;
                  } else if (document.body) {
                      scrollTop = document.body.scrollTop;
                  }
                  if (document.body.clientHeight && document.documentElement.clientHeight) {
                      clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
                  } else {
                      clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
                  }
                  scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                  if (scrollTop + clientHeight == scrollHeight) {           
                      $.getJSON("*****Action_getAjaxList.action" ,{page:i,replace_App_No:replaceAppNo},function(json){                
                            $.each(json, function(n,value){
                                    var trs = "" ;
                                   trs += "<tr><td align='center'><input type='checkbox'></td><td align='center'>"+(value.quaNo== undefined?'' :value.quaNo)+"</td><td align='center'>"+(value.chaVin== undefined?'' :value.chaVin)+"</td><td align='center'>"+(value.prdModelNo== undefined?'' :value.prdModelNo)+"</td><td width='10%' align='right'>"+value.quaMone+ "</td><td align='center'>"+(value.facDate== undefined?'' :value.facDate)+"</td><td align='center'>"+(value.accDate== undefined?'' :value.accDate)+"</td><td width='6%' align='center'>"+(value.cerType== undefined?'' :value.cerType)+"</td><td align='center'>"+(value.brandNo== undefined?'' :value.brandNo)+"</td></tr>";
                                   $( "#tablist tr:last" ).after(trs);
                            });
                      });
                      i++;
                  }
         });
  });

我是通过定义全局i的形式处理的

Answer 2

页面存储当前页码1，总页数n
滚动到底部，获取当前页码1判断是否小于n，如果是去获取下一页内容，加载到页面中，更改当前页码为2

Answer 3

你的问题应该是防止重复加载数据吧。
拿分页来举例，当前是第一页，滚动到页面底部，触发ajax 加载第二页数据，有两种方式避免重复：

1. 设置一个标志位，获取数据前先判断是否设置了标识位，如果没有就请求数据，获取到数据后，恢复标志位；否则什么都不做

2. 还是标志位的思想，但是用在事件绑定上面。拉取操作可以是scroll事件或者touchmove事件触发，如果条件满足，取消这个事件绑定，获取到数据后，再恢复事件绑定。