移動web前端下拉刷新效果

直接複製粘貼 放在頁面中便可

<script>
window.onload = function(){
window.addEventListener('touchstart', touchstart, false);
window.addEventListener('touchmove', touchMove, false);
}

var _start = 0; 
var _end = 0;
function touchstart(event) {
var touch = event.targetTouches[0];
_start = touch.pageY; 
}
function touchMove(event){ 
var touch = event.targetTouches[0]; 
_end = ( touch.pageY - _start); 
//下滑才執行操做 
if(_end > 200){     //200即手機下滑屏幕的距離，超過200則執行刷新動做
location.reload();
} 
} 
</script>

 

 

 

<script type="text/javascript"> //全局變量，觸摸開始位置 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 if (y < 370) { window.location.href = window.location.href; } } catch (e) { } } //綁定事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); } //判斷是否支持觸摸事件 function isTouchDevice() { try { document.createEvent("TouchEvent"); bindEvent(); //綁定事件 } catch (e) { } } window.onload = isTouchDevice; </script>