<!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. UEFI引导系统

    UEFI引导系统 1 2 3 4 5 6 7 分步阅读 现在的电脑大多数使用了UEFI引导系统(原来都是使用BIOS),从而加快启动速度,但同时也给用惯BIOS的用户带来很多困惑!为啥电脑不能识别制作 ...

  2. [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设（九）

    目的 1. 使用verilog/vhdl设计一个PCI的watchdog设备. 2. 通过systemverilog 写testbench. 很久之前研究过AC97的verilog代码.但是很久没用v ...

  3. Seinfeld（栈模拟）

    Seinfeld Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  4. SPOJ GSS1 && GSS3 (无更新/更新单点，并询问区间最大连续和)

    http://www.spoj.com/problems/GSS1/ 题意:无更新询问区间最大连续和. 做法:线段树每个节点维护sum[rt],maxsum[rt],lsum[rt],rsum[rt] ...

  5. 编程之美之数独求解器的C++实现方法

    编程之美的第一章的第15节.讲的是构造数独.一開始拿到这个问题的确没有思路, 只是看了书中的介绍之后, 发现原来这个的求解思路和N皇后问题是一致的. 可是不知道为啥,反正一開始确实没有想到这个回溯法. ...

  6. Android @+id与@id的区别

      Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@ ...

  7. sql server 2005 表master..spt_values

    IF OBJECT_ID('tempdb..#t') IS NOT NULL DROP TABLE #tGOcreate table #t(id int identity,Dt varchar(10) ...

  8. office2010安装出错，windows installer服务不能更新一个或多个受保护的windows文件

    转自:http://www.08lr.cn/article/1985.html office2010安装过程中出现如下图错误:windows installer 服务不能更新一个或多个受保护的wind ...

  9. hive 分配map数过少导致任务执行慢

    数据表大概150M,但是只有几个字段,导致行数特别多,当使用正则表达式去匹配时执行较慢. 解决思路:增大map数; //设置reduce数为150,将原表分成150份,map数无法直接设置,因为和输入 ...

  10. C# 微信公众平台开发（1）-- 服务器配置

    题记:最近公司需要开发微信服务号,由本人负责,以前虽然听过微信开发,但并没有认真的去了解,项目开发中,也边看文档边开发,记录自己的项目开发经验: 1.注册帐号--填写服务器配置 在https://mp ...