<!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. 多字节字符与界面 manifest

    之前把调试项目的时候软件界面变成了很古板的那种界面,后来查了一会发现因为字符集的改变,个人习惯统一我一般用同一种字符集,虽然Unicode只涉及语言问题,不过总感觉它占内存,用非字符集,搜索发现将代码 ...

  2. Android NOTE

    一些小的点就记在这里吧…… MultiDex打包时zip错误 我遇到的是 Execution failed for task ':excelSior:packageAllDebugClassesFor ...

  3. 可以把一堆dll文件放到程序目录下的一个自建目录里面

    窦宁波大哥哥的那篇文章的这种写法还是很有参考价值的. QString strLibPath(QDir::toNativeSeparators(QApplication::applicationDirP ...

  4. Solr学习(2) Solr4.2.0+IK Analyzer 2012

    Solr学习(二) Solr4.2.0+IK Analyzer 2012 开场白: 本章简单讲述如何在solr中配置著名的 IK Analyzer 分词器. 本章建立在 Solr学习(一)  基础上进 ...

  5. CSV 客座文章系列： Pruffi 通过 Windows Azure 挖掘社交媒体的强大招聘潜能

    编辑人员注释:今天这篇文章由 Pruffi 创始人 Alena Vladimirskaya 和 Pruffi 的 CTO Alexander Ivanov 联合撰写,介绍了该公司如何使用 Window ...

  6. 神器之“c#反编译工具“

    1. ".net reflector"本人正在使用,下载地址 2."ILSpy"没实用过,可是听杨中科老师说挺好. 有了这个,妈妈再也不用操心我看不到别人封装好 ...

  7. C++ - Vector 计算 均值(mean) 和 方差(variance)

    Vector 计算 均值(mean) 和 方差(variance) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24623187 ...

  8. Objective-C时间戳转换的转换和时间

    什么是时间戳? 时间戳(timestamp),一般是一个字符序列.唯一地标识某一刻的时间.数字时间戳技术是数字签名技术一种变种的应用. 思考:简单来讲就是依据文件hash加密后生成的摘要和时间生成的时 ...

  9. OkHttp–支持SPDY协议的高效HTTP库

    Android为我们提供了两种HTTP交互的方式: HttpURLConnection 和 Apache HTTP Client,虽然两者都支持HTTPS,流的上传和下载,配置超时,IPv6和连接池, ...

  10. WEBAPP组件化时代， Web Components

    polymer   ==> http://docs.polymerchina.org/ angular   ==> http://www.ngnice.com/docs/guide scr ...