打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能

学习笔记转载 2017-06-15 21:55:23 6 0

【摘要】在APP中，页面下拉刷给用户操作带来了极大的便利性。但这一效果能否在手机端的Web页中使用呢？答案是肯定的。利用HTML5中的touchstart、touchmove和touchend事件，可以模拟出类似手机APP的页面下拉刷新效果。

完整源代码如下：

```
<!DOCTYPE html>
```
```
<html>
```
```
<head>
```
```
<meta charset="utf-8">
```

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

<title>JavaScritpt H5 模拟APP页面下拉刷新</title>

```
<style type="text/css">
```
```
    body {background-color: #9c9c9c;}
```

    #downRefresh{margin-top: 0; width: 100%;}

    #down, #refresh{width: 100%; height: 50px; display: none; }

```
    #down{height: 20px;}
```

    #down>p, #refresh>p{margin: 20px auto; text-align:center; font-size: 14px; color: #fff;}

```
    img{width:80%;}
```
```
</style>
```
```
</head>
```
```
<body>
```
```
    <div id="content">
```
```
        <div id="downRefresh">
```
```
            <div id="down">
```

                <p>正在下拉，释放后刷新</p>

```
            </div>
```
```
            <div id="refresh">
```
```
                <p>正在刷新 ...</p>
```
```
            </div>
```
```
        </div>
```
```
        <div class="myContent">
```

            <img src="public/blog/home/style/images/myphoto.jpg" >

```
        </div>
```
```
    </div>
```
```
    <script type="text/javascript">
```
```
    //第一步，下拉
```
```
    function downRefreshStep1(dist){  
```

        //拉长背景以模拟拉伸效果

        var down = document.getElementById("down");

        var refresh = document.getElementById("refresh");

```
        refresh.style.display = "none";
```
```
        down.style.display = "block";
```

        down.style.height = (parseInt("20px") - dist) + "px";

```
    }
```

    //第二步，下拉完成，释放后开始刷新

```
    function downRefreshStep2(){ 
```

        var down = document.getElementById("down");

        var refresh = document.getElementById("refresh");

```
        down.style.display = "none";
```
```
        down.style.height = "20px";
```

        refresh.style.display = "block";

```
    }
```

    //第三步，刷新完成关闭提示区

```
    function downRefreshStep3(){ 
```

        var down = document.getElementById("down");

        var refresh = document.getElementById("refresh");

```
        down.style.display = "none";
```
```
        refresh.style.display = "none";
```
```
    }
```

    //objId表示事件绑定对象，即：执行下拉刷新的对象

```
    function downRefresh(objId, way){
```

        var _content = document.getElementById(objId);

```
        var _start = 0;
```
```
        var _end = 0;
```

        _content.addEventListener("touchstart", touchStart, false);

        _content.addEventListener("touchmove", touchMove, false);

        _content.addEventListener("touchend", touchEnd, false);

```
        //touchstart事件监听
```
```
        function touchStart(event){ 
```

            var touch = event.targetTouches[0];

```
            if(way == "x"){ 
```
```
                _start = touch.pageX;
```
```
            }else{ 
```
```
                _start = touch.pageY;
```
```
            }
```
```
        }
```
```
        //touchmove事件监听
```
```
        function touchMove(event){ 
```

            var touch = event.targetTouches[0];

```
            if(way == "x"){ 
```

                _end = (_start - touch.pageX);

```
            }else{ 
```

                _end = (_start - touch.pageY);

                //页面下拉，进入第一步，提示：正在下拉，释放后刷新

```
                if(_end < 0){
```

                    downRefreshStep1(_end);

```
                }
```
```
            }
```
```
        }
```
```
        //touchend事件监听
```
```
        function touchEnd(event){ 
```
```
            if(_end >0){ 
```

                console.log("左滑或上滑"+_end);

```
            }else{ 
```

                console.log("右滑或下滑"+_end);

                //下拉结束，进入第二步：正在刷新 ...

```
                downRefreshStep2();
```

                //模拟刷新成功，进入第三步，关闭提示区

```
                setTimeout(function(){ 
```
```
                    downRefreshStep3();
```
```
                }, 2500);
```
```
            }
```
```
        }
```
```
    }
```

    //调用downRefresh方法，执行下滑刷新

```
    downRefresh("content", "y");
```
```
    </script>
```
```
</body>
```
```
</html>
```

将上面代码直接复制到 html 文件中，然后在手机端访问该文件，即可实现该效果。（注意：需要更换图片）

效果如下图所示：

版权归马富天博客所有

本文标题：《使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能》

本文链接地址：http://www.mafutian.net/263.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《使用原生 js/JavaScript 使用表单全选、全不选》下一篇《基于 DOM 型的 XSS 漏洞举例,XSS举例》

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

但愿每次回忆，对生活都不感到负疚。

打赏银两×

使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能

随机阅读换一批

文章分类

TOP10