<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">

    <style type="text/css">

        *{margin: 0;padding:0}

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

        #slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;}

        #slideDown1{height: 20px;}

        #slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;}

    </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>

    //第一步：下拉过程

    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";

    }

    //下滑刷新调用

    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]; //这种获取也可以，但已不推荐使用

            var touch = event.targetTouches[0];

            if(way == "x"){

                _start = touch.pageX;

            }else{

                _start = touch.pageY;

            }

        }

        function touchMove(event){

            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(_end >0){

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

            }else{

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

                slideDownStep2();

                //刷新成功则

                //模拟刷新成功进入第三步

                setTimeout(function(){

                    slideDownStep3();

                },2500);

            }

        }

    }

</script>

</body>

</html>

　　

touch下拉刷新的更多相关文章

  1. 移动端touch实现下拉刷新

    移动端实现下拉刷新 第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑 ...

  2. 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  3. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. Android之自定义控件-下拉刷新

    实现效果: 图片素材:         --> 首先, 写先下拉刷新时的刷新布局 pull_to_refresh.xml: <resources> <string name=& ...

  5. ListView下拉刷新

    本内容为复制代码: 一.自定义ListView控件: package com.xczl.smart.view; import java.util.Date; import com.suliang.R; ...

  6. [Android]下拉刷新控件RefreshableView的实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...

  7. [转]Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能

    版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...

  8. fragment切换刷新 及下拉刷新

    此工程较BaiduLocationXMLFragmentDB相比:1.滑动fragment自动刷新该fragment2.下拉刷新fragment,上拉暂未实现 a.fragment切换刷新 1 . 由 ...

  9. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

随机推荐

  1. git使用stash存储相关操作

    git stash  将当前修改存储起来 git stash apply 恢复最近一次存储 git stash apply stash@{2} 恢复某一次存储 git stash list 查看存储列 ...

  2. Mac配置gdb的一些问题

    1.Unable to find Mach task port for process-id 1527: (os/kern) failure (0x5).   (please check gdb is ...

  3. pm2日志记录和日志分割

    pm2日志记录和日志分割 pm2介绍 pm2是nodejs进程管理工具,现在基本是node生产服务器的标准选择,可以帮助我们实现node多进程服务,开启的多个实例自动实现负载均衡. 最重要的是保证no ...

  4. tab key usage

    QA:gvim编辑ascii文本时由于tabkey的default setting 不合适编写Verilog代码(比如一个tab 代表多少空格) ANS: 1.tab 的自动补齐有两种usage自动补 ...

  5. Win2008 Server配置PHP环境

    Win2008 Server配置PHP环境   阅读目录 创建一个网站 配置PHP环境 配置iis的“处理应用程序映射” 在配置PHP环境之前要先配置好IIS. 传送门-> Win2008 Se ...

  6. pyqt设计

    pyqt是python设计GUI的第三方包 作为一个小白,我觉得这篇博客贼好,我就是按照这个博客写的. 这个博客一共分5步,每一步都特别详细. pyqt 打包exe时遇到的问题(我的python环境是 ...

  7. python面试题之python多线程与多进程的区别

    多线程可以共享全局变量,多进程不能 多线程中,所有子线程的进程号相同,多进程中,不同的子进程进程号不同 线程共享内存空间:进程的内存是独立的 同一个进程的线程之间可以直接交流:两个进程想通信,必须通过 ...

  8. drf 解析器,响应器,路由控制

    解析器 作用: 根据请求头 content-type 选择对应的解析器对请求体内容进行处理. 有application/json,x-www-form-urlencoded,form-data等格式 ...

  9. jenkins的构建项目配置

    继http://www.cnblogs.com/yajing-zh/p/5109517.html搭建好jenkins系统配置之后,新建jenkins构建项目,用于自动化构建. 点击Jenkins界面左 ...

  10. dotnet core 运行程序注意事项

    .net core 程序 debug版本无法直接运行,因为没有相关的dll,只有在进入项目文件夹那一层,执行 dotnet run 来运行,会自动链接 当前用户的个人文件夹下的 .nuget/.pac ...