首页 > 前端js上拉刷新获取数据问题

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

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

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


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

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

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


 $( 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的形式处理的


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

【热门文章】
【热门文章】