<!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. 新手 WordPress主题制作全过程

    WordPress主题制作全过程(一):基础准备 前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主 ...

  2. october安装过程

    下载代码 composer create-project october/october myoctober 准备好数据库, create database october; 配置环境于安装 php ...

  3. 基于网站地址URL传输session信息

    在php的学习中,会话是我们常常用到的,那今天我们就来详细讲讲会话中的session: 一.session的工作机制:当开启session后,服务器会在服务器中保存session文件,然后再浏览器保存 ...

  4. 中国电信物联网平台入门学习笔记7：NB-IOT信号如何检测

    NB-IOT设备会因为信号的原因,数据发不出.但数据发不出的原因有很多,这么排除是NB-IOT信号的问题呢?那就需要NB-IOT信号检测装置. 网上的信号检测设备 作为一个常年蜗居在实验室的穷屌丝而言 ...

  5. poj 3050 地图5位数问题 dfs算法

    题意:一个5*5地图上面,从任意位置上下左右跳五次,组成一个数.问:不重复的数有多少个? 思路:dfs 从任意位置跳5次,说明每个位置都需要遍历. 组成一个数:number*10+map[dx][dy ...

  6. Linux学习-Shell的变量功能

    什么是变量? 简单的说,就是让某一个特定字串代表不固定的内容. 变量的可变性与方便性 举例来说,我们每个帐号的邮件信箱默认是以 MAIL 这个变量来进行存取的, 当 dmtsai 这个 使用者登陆时, ...

  7. Linux学习-工作管理 (job control)

    什么是工作管理? 进行工作管理的行为中, 其实每个工作都是目前 bash 的 子进程,亦即彼此之间是有相关性的. 我们无法以 job control 的方式由 tty1 的环境去管理 tty2 的 b ...

  8. [转] 对 forEach()，map()，filter()，reduce()，find()，every()，some()的理解

    1.forEach() 用法:array.forEach(function(item,index){}) 没有返回值,只是单纯的遍历 2.map() 用法:array.map(function(ite ...

  9. WordCount 2.0（结对项目）

    序言 合作伙伴 201631062220      201631062120 项目码云地址: https://gitee.com/zhege/WordCount 作业详细要求 系统分析与设计结对项目 ...

  10. Leetcode 421.数组中两数的最大异或值

    数组中两数的最大异或值 给定一个非空数组,数组中元素为 a0, a1, a2, … , an-1,其中 0 ≤ ai < 231 . 找到 ai 和aj 最大的异或 (XOR) 运算结果,其中0 ...