<!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. CSS知识点摘记

    CSS层叠样式表cascading style sheets 将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性. 格式:选择器{属性名:属性值:属性名:属性值:……} CSS与HT ...

  2. sim卡中短信简要格式

    //SELECT A0 A4 00 00 02 3F 00 9F 17 //A0 A4 00 00 02 是命令头,CLA = A0表示GSM应用,INS = A4 表示SELECT,P1 P2 =  ...

  3. material风格的日期/时间选择：SublimePicker

    介绍: 一个material风格的view,提供了各种关于日期选择的功能,可以选择日期,选择时间,选择重复次数等,可以在不离开选择器的情况下在不同的选择界面间切换.其实这些功能是从5.0的日历中抠出来 ...

  4. MCI 函数与命令

    Microsoft 提供的 MMSYSTEM.H 文件中定义了调用 MCI 功能的数据类型和函数原型.在使用 MCI 功能的任何源模块中都应包含该文件. 1. MCI 函数 所有的 MCI 函数名都以 ...

  5. Image editing techniques and algorithms using Qt

    费了好半天劲先翻译这一点.还有好多地方不明白.先弄明白这一点.继续以后的翻译. 这一篇文章我们将讨论不同的技术和算法来修改图像使用Qt.但是在这之前我们继续你必须知道一些原则处理图片. 这里主要有两种 ...

  6. js 使用for循环遍历数组

    今天写个无聊的东西!for循环的使用! 例如以下:定义a数组,b为伪数组! var a = [1,2,3,0,5,4]; var b = document.getElementsByTagName(' ...

  7. 小Y的难题

    Font Size:Aa Aa Aa Description 近期小Y迷上了数学,总是在思考各种数学问题.有一天,他不小心把墨水洒在草稿纸上.他如今能看到的是"2?3?1?4"(? ...

  8. SQL Server索引进阶：第十二级，创建，修改，删除

    在第十级中我们看到了索引的内部结构,在第十一级中我们看到了平衡树结构潜在的负面影响:索引碎片.有了索引内部结构的知识,我们可以检查在执行数据定义语句和数据操作语句的时候,都发生了什么.在本级中我们介绍 ...

  9. 虎扯：纯css3各方向小三角的制作原理分析

    入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必 ...

  10. js中字符串方法

    字符串方法: 1. charAt(索引值)//通过索引值获取字符串中对应的值 例如: var str='sdf123'; alert(str.charAt(0));//结果弹出第一个索引对应的值:s