<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            body {
                font-size: 12px;
                -webkit-user-select: none;
                -webkit-text-size-adjust: none;
                font-family: helvetica;
            }
            
            #slideDown {
                margin-top: 0;
                width: 100%;
            }
            
            #slideDown1,
            #slideDown2 {
                width: 100%;
                background: #e9f4f7;
                display: none;
            }
            
            #slideDown1 {
                height: 20px;
            }
            
            #slideDown1>p,
            #slideDown2>p {
                margin: 20px auto;
                text-align: center;
                font-size: 14px;
                color: #37bbf5;
            }
            
            #content {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                /*    -webkit-touch-callout:none;*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                width: 100%;
                padding: 0;
            }
        </style>
    </head>

<body>
        <div id="content">
            <div id="slideDown">
                <div id="slideDown1">
                    <p>松开刷新</p>
                </div>
                <div id="slideDown2">
                    <p>正在刷新 ...</p>
                </div>
            </div>
            <div class="myContent">
                <ul>
                    <li>item1 -- item1 -- item1</li>
                    <li>item2 -- item2 -- item2</li>
                    <li>item3 -- item3 -- item3</li>
                    <li>item4 -- item4 -- item4</li>
                    <li>item5 -- item5 -- item5</li>
                    <li>item6 -- item6 -- item6</li>
                    <li>item7 -- item7 -- item7</li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            document.addEventListener('touchmove', function(e) {
                e.preventDefault();
            }, false);
            var flag = true;
            //第一步：下拉过程
            function slideDownStep1(dist) { // dist 下滑的距离，用以拉长背景模拟拉伸效果
                var slideDown1 = document.getElementById("slideDown1"),
                    slideDown2 = document.getElementById("slideDown2");
                slideDown2.style.display = "none";
                slideDown1.style.display = "block";
                slideDown1.style.height = (parseInt("20px") - dist) + "px";
            }
            //第二步：下拉，然后松开，
            function slideDownStep2() {
                var slideDown1 = document.getElementById("slideDown1"),
                    slideDown2 = document.getElementById("slideDown2");
                slideDown1.style.display = "none";
                slideDown1.style.height = "20px";
                slideDown2.style.display = "block";
                //刷新数据
                //location.reload();
            }
            //第三步：刷新完成，回归之前状态
            function slideDownStep3() {
                var slideDown1 = document.getElementById("slideDown1"),
                    slideDown2 = document.getElementById("slideDown2");
                slideDown1.style.display = "none";
                slideDown2.style.display = "none";
                flag = true;
            }

//下滑刷新调用
            k_touch("content", "y");
            //contentId表示对其进行事件绑定，way==>x表示水平方向的操作，y表示竖直方向的操作
            function k_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) {
                    //var touch = event.touches[0]; //这种获取也可以，但已不推荐使用
                    if(!flag) {
                        return false;
                    }
                    var touch = event.targetTouches[0];
                    if(way == "x") {
                        _start = touch.pageX;
                    } else {
                        _start = touch.pageY;
                    }
                }

function touchMove(event) {
                    if(!flag) {
                        return false;
                    }
                    var touch = event.targetTouches[0];
                    if(way == "x") {
                        _end = (_start - touch.pageX);
                    } else {
                        _end = (_start - touch.pageY);
                        //下滑才执行操作
                        if(_end < 0) {
                            slideDownStep1(_end);
                        }
                    }

}

function touchEnd(event) {
                    if(flag) {
                        flag = false;
                    } else {
                        return false;
                    }
                    if(_end > 0) {
                        console.log("左滑或上滑  " + _end);
                    } else {
                        console.log("右滑或下滑" + _end);
                        slideDownStep2();
                        //刷新成功则
                        //模拟刷新成功进入第三步
                        setTimeout(function() {
                            slideDownStep3();
                        }, 2500);
                    }
                }
            }
        </script>
    </body>

</html>

原生js下拉刷新的更多相关文章

  1. react-native 模仿原生 实现下拉刷新/上拉加载更多（RefreshListView）

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  2. 手机端轻应用模拟原生的下拉刷新效果（JavaScript）

    方案一:使用iscoll等有下拉功能的框架. 分析:因为项目的结构已经基本完成,再使用框架,会与原来的结构互相影响: 方案二:用JavaScript.Jquery写. 分析:可能没有直接使用框架的效果 ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. 【学习笔记】js下拉刷新、上拉加载 mescroll框架的使用

    写在前边: 工作需要,使用ajax在原来的列表下边使用ajax请求后台数据,拼接在列表最下边,在github转了好久,发现了一个bug极多的js刷新插件,尝试了一个下午,就在快放弃的时候,发现下边有留 ...

  5. dropload.min.js 下拉刷新后，无法上拉加载更多

    使用方法 1.引入文件 <script src="/app/media/js/dropload.min.js"></script> 111111111111 ...

  6. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  7. 原生js下拉菜单

    var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...

  8. 使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果

    CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...

  9. Android下拉刷新控件--PullToRefresh的简单使用

    Android中很多时候都会用到上下拉刷新,这是一个很常用的功能,Android的v4包中也为我们提供了一种原生的下拉刷新控件--SwipeRefreshLayout,可以用它实现一个简洁的刷新效果, ...

随机推荐

  1. servlet tomcat eclipse

    网上搜到的很多利用eclipse结合tomcat开发servlet的教程都要修改server.xml 感觉这种方式太粗暴了,server.xml最好是与应用无关的, 这里比较推荐export war的 ...

  2. poj2390

    #include <stdio.h> #include <stdlib.h> int main() { int r,m,y,i; scanf("%d %d %d&qu ...

  3. docker基于 aufs 文件系统

    docker的核心功能就是容器版本管理,在容器层实现了CVS版本管理,比如git那种可以commit/roll back 而AUFS就是其实现基础 AUFS可以实现文件系统的snapshot,这样对f ...

  4. mysql 5.6密码强度插件使用

    在mysql 5.6对密码的强度进行了加强,推出了validate_password 插件.支持密码的强度要求. 此插件要求版本:5.6.6 以上版本安装方式: 1.安装插件:(默认安装了插件后,强度 ...

  5. Java面试题之四

     十六.运行时异常与一般异常有何异同 Java提供了两类主要的异常:runtime exception和checked exception. 1.checked exception:这种异常也就是我们 ...

  6. Mahout源码MeanShiftCanopyDriver分析之二MeanShiftCanopyMapper仿造

    首先更正一点,昨天处理数据的时候是有问题的,直接从网页中拷贝的文件的空格是有问题的,直接拷贝然后新建的文件中的空格可能有一个两个.三个的,所以要把两个或者三个的都换为一个,在InputMapper中下 ...

  7. HDU Exponentiation 1063 Java大数题解

    Exponentiation Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. Android图片裁剪之自由裁剪

    我的博客http://blog.csdn.net/dawn_moon 客户的需求都是非常怪的.我有时候在给客户做项目的时候就想骂客户是sb.可是请你相信我,等你有需求,自己变成客户的时候,给你做项目的 ...

  9. AngularJs (二) 搭建Deployd 服务爬坑

    Deployd 爬坑 按照书上的教程,介绍Deployd 这个东东,首先进入其deployd.com/网页,发现这个东东着实厉害. THE SIMPLEST WAY TO BUILD AN API 按 ...

  10. iWeb峰会见闻

    8.16去参加了iWeb峰会,一大早8点过10分就到了,发现外面已经排起了长队(说明影响力越来越大,关注的人越来越多了.) 此次大会参与的企业也越来越多,当然是有目的而来~ 上午 google商业合作 ...