H5手機頁面滑動非同步載入資料
阿新 • • 發佈：2018-12-26
怎樣實現手機版的web頁面在滑動的時候非同步載入資料，直接貼程式碼，可以直接新建一個html頁面進行測試哦，注意這裡要引用jQuery外掛
<!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>