移动端实现下拉刷新

　

第一部分：四个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. Oracle物化视图的用法与总结

    物化视图(material view)是什么? 物化视图是包括一个查询结果的数据库对象,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表. 物化视图存储基于远程表的数据,也可以称为快照(类 ...

  2. 小偷网站工具--Teleport Ultra

    可以克隆别人网站的工具 http://jingyan.baidu.com/article/219f4bf7dce58bde442d3836.html

  3. iOS开发——闪光灯

    还是那句很欠揍的话,没啥难度,直接上代码. // //  ViewController.m //  Demo—闪光灯 // //  Created by yyt on 16/4/21. //  Cop ...

  4. 用简单的http抓包来实现微信公众网页如何模拟登录

    一.准备工具: 系统:XP 浏览器:IE8 抓包工具:HttpWatch(它可以查看url请求的数据包) 二.抓包思路: 浏览器上的任何获取数据的方式都符合http协议的请求,只要发送符合要求的数据就 ...

  5. UVa 11503 - Virtual Friends

    题目大意:给出若干对朋友关系,每给出一对朋友关系,就输出二者所在关系网中的人数. 首先是对每个人编号,使用map简化编号过程,然后就是使用并查集更新集合.要注意的是当给出A和B的朋友关系时,无论A和B ...

  6. 【Xilinx-Petalinux学习】-07-OpenCV的软硬件处理速度对比

    有空了设计一个hls的图像处理IP. 通过hls设计ip模块实现opencv的图像处理. 对比软件和硬件的图像处理速度.

  7. Win10還原成最乾淨的狀態 不必重灌

    系統不穩定時我們想到的第一個選擇就是重灌,如果你的作業系統是win10將會有另外一個新選擇,就是透過程式進行還原,讓你的電腦回到剛安裝時的清爽. 工具資訊 [軟體名稱]微軟 Refresh Windo ...

  8. OC强弱引用的使用规则

    强弱引用的唯一区别只是体现在对象的消亡上. 当一个对象不再有强引用指向它时,它就会被销毁. 弱引用不持有对象,不计入自动引入计数,所以不用考虑它销毁的问题.

  9. 关于金额，重量等浮点数的数据库字段设计（用Int，Long代替浮点数计算）

    金额.重量.成绩等数据库字段推荐使用int或bigint类型. 通常我们数据库设计中金额,重量等涉及到小数位的字段会用float或decimal,mysql还可以用double,但往往每笔金额的计算我 ...

  10. 在web前端使用SVG

    前言: 花了些时间了解了一下svg,然而仍然不怎么了解... 第一步:直接在html代码中使用svg. 首先了解几个标签: <svg version="1.1" xmlns= ...