我第一次操作上拉,触发ajax进行加载数据,那我第二次再上拉的话,不就又重复加载了一次吗?如果用分页的话,我是怎么判断这是第几次上拉,更新哪页呢?
我表达的可能不是很好,如果哪里不明白可以说一下,最好能放一下实现源码,先谢谢各位了
你的问题应该是防止重复加载数据吧。
拿分页来举例,当前是第一页,滚动到页面底部,触发ajax 加载第二页数据,有两种方式避免重复:
设置一个标志位,获取数据前先判断是否设置了标识位,如果没有就请求数据,获取到数据后,恢复标志位;否则什么都不做
还是标志位的思想,但是用在事件绑定上面。拉取操作可以是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