移动端实现下拉刷新

　

第一部分：四个touch事件

　　1.touchstart：只要将手指放在了屏幕上（而不管是几只）,都会触发touchstart事件。

　　2.touchmove: 当我们用手指在屏幕上滑动时，这个事件会被连续触发。 如果我们不希望页面随之滑动，我们可以使用event的preventDefault来阻止这个默认行为。

　　3.touchend: 当手指滑动后离开屏幕，这时就触发了touchend事件。

　　4.touchcancel: 系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。

　　

第二部分：四个touch对象

　  1. touches，这是一个类数组对象，包含了所有的手指信息，如果只有一个手指，那么我们用touches[0]来表示。

　  2. targetTouches 。 手指在目标区域的手指信息。

3. changedTouches：最近一次触发该事件的手指信息。

4. touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息。

第三部分：实例1

　　先看效果图：

　　　　

　　它的实现原理非常简单，就是将红色圆形的postion属性设为absolute，然后，当我们滑动它时，就触发了touchmove事件，将其Left和top设置为event的pageX和pageY即可，为保证触发中心与圆心在同一位置，只需将pageX加上width的一半，pageY加上height的一半。

　　源码如下：

<!DOCTYPE html>

<html>

<head>

    <title>touchExample</title>

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <style>

        #touchDiv{

            position: absolute;

            width: 50px;

            height: 50px;

            top: 20px;

            left: 20px;

            text-align: center;

            line-height: 50px;

            color:white;

            border-radius: %;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="touchDiv">点我</div>

    <script>

        var touchDiv = document.getElementById("touchDiv");

        var x,y;

        touchDiv.addEventListener("touchstart",canDrag);

        touchDiv.addEventListener("touchmove",drag);

        touchDiv.addEventListener("touchend",nodrag);

        function canDrag (e) {

            console.log("god开始");

        }

        function drag (e) {

            $("#touchDiv").css("left",e.touches[].pageX-);

            $("#touchDiv").css("top",e.touches[].pageY-);

        }

        function nodrag () {

            console.log("god结束");

        }

    </script>

</body>

</html>

　　

第四部分：实例2

　　这个实例就是下拉刷新功能的实现，效果如下：

　　

源码如下：

<!DOCTYPE html>

<html>

<head>

    <title>下拉刷新</title>

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

    <style>

        *{

            margin:;

            padding: ;

            font-size:15px;

        }

        .header{

            height: 50px;

            line-height: 50px;

            text-align: center;

            background-color: blue;

            color:white;

            font-size: 23px;

        }

        .drag_to_refresh{

            align-items: center;

            padding-left: 155px;

            background-color: #bbb;

            color:yellow;

            display: none;

        }

        .refresh{

            height: 50px;

            line-height: 50px;

            text-align: center;

            background-color: #bbb;

            color: green;

            display: none;

        }

        .drag{

            text-align: center;

            background-color: lightgray;

            position: relative;

            padding:20px;

            text-indent: 1em;

            line-height: 30px;

            font-size:18px;

        }

    </style>

</head>

<body>

    <div class="header">政务云</div>

    <div class="drag_to_refresh"></div>

    <div class="refresh">刷新中...</div>

    <div class="drag">电子政务云（E-government cloud）属于政府云，结合了云计算技术的特点，对政府管理和服务职能进行精简、优化、整合，并通过信息化手段在政务上实现各种业务流程办理和职能服务，为政府各级部门提供可靠的基础IT服务平台。</div>

<script>

window.onload = function () {

    var initX;

    var drag_content = document.querySelector(".drag");

    var drag_to_refresh = document.querySelector(".drag_to_refresh");

    var refresh = document.querySelector(".refresh");

    drag_content.addEventListener("touchmove",drag);

    drag_content.addEventListener("touchstart",dragStart);

    drag_content.addEventListener("touchend",dragEnd);

    function dragStart(e){

        initY = e.touches[].pageY;

        console.log(initX);

    }

    function drag (e){

        drag_to_refresh.style.display = "block";

        drag_to_refresh.style.height = (e.touches[].pageY - initY) + "px";

        console.log(drag_to_refresh.style.height);

        if(parseInt(drag_to_refresh.style.height)>=){

            // 注意：因为height得到的值是px为单位，所以用parseInt解析

            drag_to_refresh.style.height = "100px";

            if(parseInt(drag_to_refresh.style.height)>){

                drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;

                drag_to_refresh.innerHTML  = "松开刷新";

            }

        }

    }

    function dragEnd (e){

        if(parseInt(drag_to_refresh.style.height)>){

            refresh.style.display = "block";

            setTimeout(reload,);

        }

        drag_to_refresh.style.display = "none";

    }

    function reload () {

        location.reload();

    }

}

</script>

</body>

</html>

移动端touch实现下拉刷新的更多相关文章

  1. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

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

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

  3. 移动端上拉加载下拉刷新插件-mescroll.js插件

    官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...

  4. html5实现移动端下拉刷新（原理和代码）

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  5. vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

  6. vue2.0 移动端，下拉刷新，上拉加载更多 封装组件

    前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...

  7. 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...

  8. vue移动端下拉刷新、上拉加载

    由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...

  9. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

随机推荐

  1. Ubuntu下搭建C++开发环境

    Ubuntu使用eclipse搭建c/c++编译环境----CDT插件 Ubuntu(Linux)使用Eclipse搭建C/C++编译环境          这两天,给自己电脑弄了双系统,除了原来的W ...

  2. chorme加减乘除浮点数处理

    在处理简单的1-0.7的时候发现chorme给的结果竟然是0.30000000000000004,瞬间蛋疼了,这数据能用?! 然后去百度找到了简单的两个数的加减乘除,然后修改了下,除了除法都可以多个数 ...

  3. jsoup的介绍使用(转)

    jsoup文档: http://www.open-open.com/jsoup/ 原链接: http://www.oschina.net/question/12_14127 jsoup 简介 Java ...

  4. c#中反射

    在.Net 中,程序集(Assembly)中保存了元数据(MetaData)信息,因此就可以通过分析元数据来获取程序集中的内容,比如类,方法,属性等,这大大方便了在运行时去动态创建实例. MSDN解释 ...

  5. Java编译时出现No enclosing instance of type XXX is accessible.

    今天在编译Java程序的时候出现以下错误: No enclosing instance of type Main is accessible. Must qualify the allocation ...

  6. group by 汇总

    group by 的意思为分组汇总.使用了group by 后,要求Select出的结果字段都是可汇总的,否则就会出错. 比如,有:{学号,姓名,性别,年龄,成绩}字段 这样写:SELECT 学号,姓 ...

  7. django学习——基础

    在ubuntu下, 安装: pip install django / sudo apt-get install python-django 项目与应用 一个project包含多个app,每个app处理 ...

  8. 【MySQL】JDBC连接MySQL的一些问题以及解决办法

    [MySQL]JDBC连接MySQL的一些问题以及解决办法 http://blog.csdn.net/baofeidyz/article/details/52017047

  9. DOMContentLoaded

    setTimeout(function(){ alert("settimeout"); },0); EventUtil.addHandler(window, "DOMCo ...

  10. HTML5学习笔记三：aside元素，time元素与微格式

    一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...