一介布衣

🧭 快速导航

javascript 实现html5 页面下拉刷新 ​

--> -->

使用html5 开发一个手机端页面

如何能像app一样实现下拉刷新,或者上推刷新.

我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.

先看下效果:

--> -->

这是微信内置浏览器打开后的效果,

再看下从顶部按住下拉刷新的效果

--> -->

  1. 首先有一个目标div

这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.

这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束

那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件.

2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示 "松开后刷新最新回复"

这个提示效果首先我们需要在 目标div 内方一段 html :

     <div id="sd">
            <div id="sd1">
                <p>松开后刷新最新回复</p>
            </div>
            <div id="sd2">
                <p><img src="/images/loading.gif" alt="玩命加载中.."/></p>
            </div>
     </div>

3 . 对应的我们需要一段css 来控制上面这个拉伸效果

#sd,#ud{margin-top: 0;width: 100%;}
#sd1,#sd2,#ud1,#ud2{width: 100%;height: 70px;background: #e9f4f7;display: none;}
#sd1,#ud2{height: 20px;}
#sd1>p,#sd2>p,#ud1>p,#ud2>p{margin: 20px auto;padding-top:8px;text-align:center;font-size: 14px;color: #37bbf5;}

上面为2个id定义了样式 ( #sd ,#ud)

是因为我在页面里同时实现了下拉和上推的效果,

而整个页面包括样式的命名都不规范,因为手机端访问,考虑到流量和网络制式的限制,能节约就节约,所以才会简化命名,所以才会全部手写 javascript 来实现,没有引入一个第三方包.

4. 上面选好了目标 div ,加上了松开刷新的ui效果,并且加上了css 样式控制.

这一步需要我们给目标div 加监听事件了.

function slideDownStep1(dist) {
    var sd1 = document.getElementById("sd1"),
        sd2 = document.getElementById("sd2");
    sd2.style.display = "none";
    sd1.style.display = "block";
    sd1.style.height = 1 - parseInt(dist) + "px";
}
function slideDownStep2() {
    var sd1 = document.getElementById("sd1"),
        sd2 = document.getElementById("sd2");
    sd1.style.display = "none";
    sd1.style.height = "20px";
    sd2.style.display = "block";
}
function slideDownStep3() {
    var sd1 = document.getElementById("sd1"),
        sd2 = document.getElementById("sd2");
    sd1.style.display = "none";
    sd2.style.display = "none";
}

上面三个方法都是控制 <div id="sd" > 的显示效果.

function kt_touch(contentId, way) {
    var _start = 0,
        _end = 0,
        _content = document.getElementById(contentId);
    _content.addEventListener("touchstart", touchStart, false);
    _content.addEventListener("touchmove", touchMove, false);
    _content.addEventListener("touchend", touchEnd, false);
    function touchStart(event) {
        event.preventDefault();
        if (!event.touches.length) return;
        var touch = event.touches[0];
        if (way == "x") {
            _start = touch.pageX;
        } else {
            _start = touch.pageY;
        }
    }

    function touchMove(event) {
        event.preventDefault();
        if (!event.touches.length) return;
        var touch = event.touches[0];

        if (way == "x") {
            _end = (_start - touch.pageX);
        } else {
            _end = (_start - touch.pageY);
            if (_end &lt; 0) {
                slideDownStep1(_end);
            }
        }
    }

    function touchEnd(event) {
        if (_end &gt; 0) {
            //左滑或上滑
            slideDownStep2();
            slideDownStep3();
            getReplyList(++curPage);
        }else{
            slideDownStep2();
            slideDownStep3();
            getReplyList();
        } //右滑下滑
    }
}

kt_touch 核心函数接收2个参数 ,dom ID 和 控制方式 (x轴 或 y轴)

并且在目标 div 上注册了3个事件,并且在对应的事件上绑定了事件触发函数.就是当此事件触发时,对应的执行绑定函数.

5. 最后我们执行事件监听方法 kt_touch

kt_touch('ep','y');

第一个参数 ep 是目标div 的ID, 第二个参数 'y' 表示在y轴上的控制方式.