赞
踩
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Scripts/jquery-1.7.1.js"></script> <script> $(document).bind("scroll", srcollEvent); $(document).bind("touchstart", startEvent).bind("touchmove", moveEvent).bind("touchcancel", stopEvent).bind("touchend", stopEvent); var isScrollStop = true; //页面是否停止滚动 防止屏幕有滑动但还没到底部就开始加载数据 var isMoveDown = false; //防止手指向上滑动屏幕开始加载数据 var isLoading = false; //防止异步请求数据未返回到前端的时候重复提交请求 var isMoved = false; //手指是否在滑动屏幕 防止出现手指触摸屏幕而没有滑动就加载数据 var startY = 0; var startX = 0; function srcollEvent() { if ($(document).scrollTop() > 0) { isScrollStop = false; } //如果是左右滑动异步加载数据就用下面的代码 /* if ($(document).scrollLeft() > 0) { isScrollStop = false; }*/ } function startEvent() { startY = event.targetTouches[0].clientY; //如果是左右滑动加载数据就用下面的代码 //startX = event.targetTouches[0].clientX; isScrollStop = true; isMoved = false; isMoveDown = false; } function moveEvent() { var Y = event.targetTouches[0].clientY; if (startY > Y) { isMoveDown = true; } else { isMoveDown = false; } //如果是左右滑动加载数据就用下面的代码 /*var X = event.targetTouches[0].clientX; if (startX > X) { isMoveDown = true; } else { isMoveDown = false; }*/ isMoved = true; } function stopEvent() { if (isScrollStop && isMoved && !isLoading && isMoveDown) { console.log("分页加载"); loadData(); } } var index = 0; function loadData() { //模拟向后台异步加载数据 isLoading = true; //异步加载数据之前先设置为正在等待数据 $("table").append("<tr><td>异步加载数据" + index + "</td></tr>"); $("table").append("<tr><td>异步加载数据" + (index+1) + "</td></tr>"); $("table").append("<tr><td>异步加载数据" + (index+2) + "</td></tr>"); $("table").append("<tr><td>异步加载数据" + (index+3) + "</td></tr>"); $("table").append("<tr><td>异步加载数据" + (index+4) + "</td></tr>"); $("table").append("<tr><td>异步加载数据" + (index+5) + "</td></tr>"); //此时数据已返回到前端 index+=5; isLoading = false; isMoved = false; } function sleep() { var t1 = new Date(); var t2 = new Date(); while ((t2 - t1) < 3000) { t2 = new Date(); } } </script></head><body > <table style="font-size:100px"> <tr> <td>测试数据1</td> </tr> <tr> <td>测试数据2</td> </tr> <tr> <td>测试数据3</td> </tr> <tr> <td>测试数据4</td> </tr> <tr> <td>测试数据5</td> </tr> <tr> <td>测试数据6</td> </tr> <tr> <td>测试数据7</td> </tr> <tr> <td>测试数据1</td> </tr> <tr> <td>测试数据2</td> </tr> <tr> <td>测试数据3</td> </tr> <tr> <td>测试数据4</td> </tr> <tr> <td>测试数据5</td> </tr> <tr> <td>测试数据6</td> </tr> <tr> <td>测试数据7</td> </tr> </table></body></html>
转载于:https://www.cnblogs.com/forchenbinbin/p/8622042.html