在开发中有时候会有下拉刷新的需求,自己项目中有用到,把代码整理如下,其中移动端与pc端判断代码不在这里提供
if (app.isPhone || app.isAndroid) { console.log("移动端"); //滑动处理 var startX, startY; document.addEventListener('touchstart', function(ev) { startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; //console.log(startX, startY); }, false); document.addEventListener('touchmove', function(ev) { clientX = ev.touches[0].pageX; clientY = ev.touches[0].pageY; //console.log(clientX, clientY); var direction = GetSlideDirection(startX, startY, clientX, clientY); switch (direction) { case 0: console.log("无操作"); break; case 1: // 向上 console.log("up"); break; case 2: // 向下 console.log("down"); console.log(clientY - startY); if (clientY - startY > 0) { //console.log(1); if (clientY - startY >= 50) { document.getElementById("jifenContent").style.marginTop = "50px"; } else { document.getElementById("jifenContent").style.marginTop = (clientY - startY) + "px"; } document.getElementById("loadingpic").style.display = "block"; } break; default: } }, false); document.addEventListener('touchend', function(ev) { var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch (direction) { case 0: console.log("无操作"); break; case 1: // 向上 console.log("up"); break; case 2: // 向下 console.log("down"); location.reload(); break; default: } }, false); function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; //var dx = endX - startX; var result = 0; if (dy > 0) { //向上滑动 result = 1; } else if (dy < 0) { //向下滑动 result = 2; } else { result = 0; } return result; } } else { console.log("PC端"); var flag = false; document.onmousedown = function(ev) { flag = true; PstartX = ev.pageX; PstartY = ev.pageY; console.log("start:" + PstartX, PstartY); document.onmousemove = function(ev) { PMoveX = ev.pageX; PMoveY = ev.pageY; if (flag) { console.log("move:" + PMoveX, PMoveY); var resutl = getpostion(PMoveY, PstartY); switch (resutl) { case 0: console.log("无操作"); break; case 1: console.log("向上"); break; case 2: console.log("向下"); if (PMoveY - PstartY > 0) { if (PMoveY - PstartY >= 100) { document.getElementById("jifenContent").style.marginTop = "100px"; } else { document.getElementById("jifenContent").style.marginTop = PMoveY - PstartY + "px"; } document.getElementById("loadingpic").style.display = "block"; } break; } } } document.onmouseup = function(ev) { flag = false; PendX = ev.pageX; PendY = ev.pageY; console.log("end:" + PendX, PendY); var resutl = getpostion(PMoveY, PstartY); switch (resutl) { case 0: console.log("无操作"); break; case 1: console.log("向上"); break; case 2: console.log("向下"); location.reload(); break; } } function getpostion(PMoveY, PstartY) { if (PMoveY - PstartY == 0) { return 0; //无操作 } if (PMoveY - PstartY < 0) { return 1; //向上 } if (PMoveY - PstartY > 0) { return 2; //向下 } } } }