移动端实现下拉刷新

第一部分：四个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实现下拉刷新的更多相关文章

分享一个discuz touch端的jQuery下拉刷新组件
在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...
分页插件思想：pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
html5实现移动端下拉刷新（原理和代码）
这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...
vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示原文链接:http://ww ...
vue2.0 移动端，下拉刷新，上拉加载更多封装组件
前言在做移动端的避免不了下拉刷新,上拉加载直接上代码吧,哈哈组件里: <template lang="html"> <div class="yo ...
实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

随机推荐

UVA 11551 Experienced Endeavour
矩阵快速幂. 题意事实上已经告诉我们这是一个矩阵乘法的运算过程. 构造矩阵:把xi列的bij都标为1. 例如样例二: #include<cstdio> #include<cstrin ...
Android studio开多个窗口引起的问题
1.clean 的时候,intermediates删不掉 2.出现:app:compile_DebugJavaWithJavac 没有具体错误出现以上问题的时候只要把多余的删除,记得只留一个在当前窗 ...
SpringJDBC学习之路(1)
本人从事java开发也有一段时间了,项目开发也有好几个.但感觉所有写的代码无非就是搬数据取数据.service层写的逻辑多一点,最近做的一个项目整个项目的结构以及层次发现代码过于臃肿冗余.同样一个方法 ...
IOS开发者证书申请及应用上线发布详解(2014版)
其实一直以来我都想做一个最齐全的上传应用到appstore的教程,但一直狠不下心,今天凌晨2点12分,我鼓起勇气写教程,来吧不多说.登录开发者中心:http://developer.apple.com ...
关于css中的border
我一直以为css中的border是正方形的像这样因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来当我给每一个边分别设置颜色的时候才发现他们是以梯形 ...
IOS 7 Xcode 5 免IDP证书真机调试(转载)
最近转开发了,真的很久没有更新博客了,今天有空写一篇吧. 今天带来的是 IOS 7 Xcode 5 免IDP证书的真机调试.说白了就是穷,不想给苹果交那$99的钱. 注意:虽然可以用这个方法实现真机调 ...
最基本的SQL语法/语句
DDL—数据定义语言(Create,Alter,Drop,DECLARE) DML—数据操纵语言(Select,Delete,Update,Insert) DCL—数据控制语言(GRANT,REVOK ...
ksoap2- webservice
1．概述对于J2ME访问远端的Web Service,除了官方标准JSR 172,我们还有两种选择: l kSOAP l Wingfoot Wingfoot是由Win ...
MYSQL外键的使用以及优缺点
主键和索引是不可少的,不仅可以优化数据检索速度,开发人员还省不其它的工作, 矛盾焦点:数据库设计是否需要外键.这里有两个问题:一个是如何保证数据库数据的完整性和一致性:二是第一条对性能的影响. 正方观 ...
linux：基本命令
1.显示日期与时间:date 显示2009/08/17形式的格式:date +%Y/%m/%d 显示17:04时间格式:date +%H/%M 2.显示日历:cal 常用的命令:cal 2009:ca ...

移动端touch实现下拉刷新