移动端网页下拉刷新

标签：移动端网页下拉刷新

一、采用触摸事件touchmove。

1、定义公共变量

var timer = null; 

var startY, moveY, initTop, oldTop, newTop;

2、添加事件

$(‘#container ul‘).on(‘touchstart‘, function(e){

    startY = e.originalEvent.touches[0].pageY;

    initTop = 0;

});

$(‘#container ul‘).on(‘touchmove‘, function(e){

    moveY = e.originalEvent.touches[0].pageY;

    scrollEnd();

});

3、定时触发方法

function scrollEnd(){

    if(timer) clearTimeout(timer);

    newTop = $(window).scrollTop();

    if(newTop === oldTop) {

        clearTimeout(timer);

if(initTop != newTop){

    var wHeight = $(window).height();

    var dHeight = $(document).height();

    if((newTop > 0) && (newTop + wHeight >= dHeight) && (startY - moveY > 0)){

        //执行业务代码

    }

}

    } else{

        oldTop = newTop;

        timer = setTimeout(scrollEnd,100);

    }

}

二、采用scroll事件

$(window).scroll(function(){

    var scrollTop = $(this).scrollTop();//滚动条距离Y轴的高度

    var documentHeight = $(document).height();//整个窗口的高度

    var height = $(this).height();//可视区域的高度

    if((scrollTop + height) == documentHeight){

        //执行业务代码

    }

});

本文出自 “小蚂蚁” 博客，请务必保留此出处http://16410743.blog.51cto.com/10657793/1693393

移动端网页下拉刷新

标签：移动端网页下拉刷新

原文地址：http://16410743.blog.51cto.com/10657793/1693393