<!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. Python——流程控制语句

    if语句 条件进行判断,满足,则执行里面 的内容:不满足,则执行if循环下面的语句 基本语法: if 判断条件: 满足后执行语句 1 如果:女人的年龄>30岁,那么:叫阿姨 age_of_gir ...

  2. NOIP模拟赛 不等数列

    [题目描述] 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入“>”和“<”.问在所有排列中,有多少个排列恰好有k个“<”.答案对2012取模. [输入格式] 第一行 ...

  3. uvm transaction modeling

    1.what is transaction? network transactions tcp/ip wifi 3g/4g bus transactions amba-ahb/apb/axi pci/ ...

  4. Python基础——字典（dict）

    由键-值对构建的集合. 创建 dic1={} type(dic1) dic2=dict() type(dic2) 初始化 dic2={'hello':123,'world':456,'python': ...

  5. Python学习笔记：re模块（正则表达式）

    本文是部分内容参考自:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html,虽然这篇博客是基于Python2.4的老版本,但是基础的P ...

  6. 我的Python分析成长之路6

    模块:本质就是.py结尾的文件.从逻辑上组织python代码. 包: 本质就是一个目录,带有__init__.py文件,从逻辑上组织模块. 模块的分类: 1.标准库(内置的模块) 2.开源库(第三方库 ...

  7. 剑指Offer（书）：不用四则运算做加法

    题目:写一个函数,求两个整数之和,不得使用四则运算位运算. package com.gjjun.jzoffer; /** * 写一个函数,求两个整数之和,不得使用四则运算 * * @author gj ...

  8. SQL前后端分页

    /class Page<T> package com.neusoft.bean; import java.util.List; public class Page<T> { p ...

  9. Java技术——Java中创建对象的5种方式

    此文为译文 原文连接:https://dzone.com/articles/5-different-ways-to-create-objects-in-java-with-ex 0. 前言 作为Jav ...

  10. 《Scrum实战》第1课【知易行难】全团课后任务汇总

          1组 孟帅(班长)   kecyru 2017-7-5 http://kecyru.blog.163.com/blog/static/27416617320176411513013 htt ...