Android移动端touch实现下拉刷新功能

第一部分：四个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: 50%;
   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[0].pageX-25);
   $("#touchDiv").css("top",e.touches[0].pageY-25);
  }
  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:0;
   padding: 0;
   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[0].pageY;
  console.log(initX);
 }
 function drag (e){
  drag_to_refresh.style.display = "block";
  drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
  console.log(drag_to_refresh.style.height);
  if(parseInt(drag_to_refresh.style.height)>=100){
   // 注意：因为height得到的值是px为单位，所以用parseInt解析
   drag_to_refresh.style.height = "100px";
   if(parseInt(drag_to_refresh.style.height)>80){
    drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
    drag_to_refresh.innerHTML = "松开刷新";
   }
  }
 }
 function dragEnd (e){
  if(parseInt(drag_to_refresh.style.height)>80){
   refresh.style.display = "block";
   setTimeout(reload,1000);
  }
  drag_to_refresh.style.display = "none";
 }
 function reload () {
  location.reload();
 }
}
</script>
</body>
</html>

以上所述是小编给大家介绍的移动端touch实现下拉刷新功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详解

    浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详解

    首先从字面意思理解两个词 onTouchEvent:触发触摸事件 onInterceptTouchEvent:触发拦截触摸事件 通过查看源代码及类继承关系 onInterceptTouchEvent:是定义于ViewGroup里面的一个方法,此事件是用于拦截触摸事件的,ViewGroup(继承自View),一个View的Group,也就是我们的一个布局如LinerLayout,各个布局类都继承自ViewGroup: onTouchEvent:是定义于View中的一个方法,处理传递到View的手势

  • Android中处理apple-touch-icon详解

    苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native应用更相像了.由于苹果设备IPod,IPhone,IPad等设备广泛,很多网页都提供了touch icon这种图标资源.由于Android中并没有及早的有一份这样的标准,当我们想把网页添加到桌面时,仍然需要使用苹果的Touch Icon. Touch Icon 当我们想让一个网页比较完美地添加到桌面,通常情况下我们需要设置一个png图片文

  • Android判断touch事件点是否在view范围内的方法

    本文实例讲述了Android判断touch事件点是否在view范围内的方法.分享给大家供大家参考,具体如下: private Rect mChangeImageBackgroundRect = null; private boolean isInChangeImageZone(View view, int x, int y) { if (null == mChangeImageBackgroundRect) { mChangeImageBackgroundRect = new Rect(); }

  • 安卓(Android)实现3DTouch效果

    安卓(Android)实现3DTouch效果

    本篇博客要做的效果图: 来个低质量动图: 这个动图效果不是很好,实际上模糊效果应该是像上面第一张图那样的,后面会放出代码,有兴趣的可以试着运行一下看看效果. 先说一下思路,我们要实现这个效果其实只需要掌握几个东西: 1.屏幕截图 2.模糊高斯模糊) 3.添加视图 4.弹出动画 5.处理长按事件 6.优化(模糊速度和强度) 流程:当用户长按一个Item的时候,我们先截取一张当前屏幕的图片,接着将这张图片进行压缩后再进行高斯模糊,再覆盖在整个布局上面(包括覆盖Toolbar),这样界面模糊的效果就出

  • 30分钟搞清楚Android Touch事件分发机制

    30分钟搞清楚Android Touch事件分发机制

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在ViewGroup内,ViewGroup也可以在其他ViewGroup内,这时候把内部的ViewGroup当成View来分析. ViewGroup的相关事件有三个:onInterceptTouchEvent.dispatchTouchEvent.onTouchEvent.View的相关事件只有两个:

  • Android的Touch事件处理机制介绍

    Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后. Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层. 首先说一下Touch事件处理的几条基本规则. 如果在某个层级没有处理ACTION_DOWN事件,那么该层就再也收不到后续的Touch事件了直到下一次ACTION_DOWN事件. 说明: a.某个层级没有处理某个事件指的是它以及它的子View都没有处理该事件. b.这条规则不适用于Activity层(它是顶层

  • Android移动端touch实现下拉刷新功能

    Android移动端touch实现下拉刷新功能

    第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑动时,这个事件会被连续触发. 如果我们不希望页面随之滑动,我们可以使用event的preventDefault来阻止这个默认行为. 3.touchend: 当手指滑动后离开屏幕,这时就触发了touchend事件. 4.touchcancel: 系统停止跟踪触摸时候会触发.例如在触摸过程中突然页面alert()一个提示框

  • Android微信端的下拉刷新功能

    Android微信端的下拉刷新功能

    在Android和iOS上对于下拉刷新的处理方法: 在微信公众号内,在面对下拉刷新这个问题上,Android和iOS都自己的表现方式: iOS: Android: 所以我们要给内容加载监听器 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); docum

  • Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多

    Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多

    最近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多. 新浪微博就是使用这种方式的典型. 当用户从网络上读取微博的时候,如果一下子全部加载用户未读的微博这将耗费比较长的时间,造成不好的用户体验,同时一屏的内容也不足以显示如此多的内容.这时候,我们就需要用到另一个功能,那就是listview的分页了,其实这个分页可以做成客户端的分页,也可以做成服务器端的分页(点击加载时,从服务器对应的加载第N页就好了!!!).通过分

  • Android使用PullToRefresh完成ListView下拉刷新和左滑删除功能

    Android使用PullToRefresh完成ListView下拉刷新和左滑删除功能

    ListView下刷新刷功能相信从事Android开发的猿友们并不陌生,包括现在Google亲儿子SwipeRefreshLayout实现效果在一些APP上也能看见(不过个人不喜欢官方的刷新效果).本文就带领一些刚入门android的朋友或者一起爱分享的朋友来简单的实现ListView的下拉刷新和左滑删除效果. 一.本文主要内容: 使用PullToRefresh完成ListView下拉.上拉刷新: 扩展PullToRefresh完美的实现ListView左滑删除效果: 注意:本文中的PullTo

  • Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能(附源码)

    Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能(附源码)

    最近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在网上直接找一个现成的,可是尝试了网上多个版本的下拉刷新之后发现效果都不怎么理想.有些是因为功能不完整或有Bug,有些是因为使用起来太复杂,十全十美的还真没找到.因此我也是放弃了在网上找现成代码的想法,自己花功夫编写了一种非常简单的下拉刷新实现方案,现在拿出来和大家分享一下.相信在阅读完本篇文章之后,大家都可以在自己的项目中一分钟引入下拉刷新功能. 首先讲一下实现原理.这里我们将采取的方案是使用组合View的方式,先自定义一个布局

  • Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

    Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

    如何为不同的list item呈现不同的菜单,本文实例就为大家介绍了Android仿微信或QQ滑动弹出编辑.删除菜单效果.增加下拉刷新等功能的实现,分享给大家供大家参考,具体内容如下 效果图: 1. 下载开源项目,并将其中的liberary导入到自己的项目中: 2. 使用SwipeMenuListView代替ListView,在页面中布局: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefresh

  • Android开发之无痕过渡下拉刷新控件的实现思路详解

    Android开发之无痕过渡下拉刷新控件的实现思路详解

    相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下拉刷新控件普遍缺陷演示 以直播吧APP为例: 第1种情况: 滑动控件在初始的0位置时,手势往下滑动然后再往上滑动,可以看到滑动到初始位置时滑动控件不能滑动. 原因: 下拉刷新控件响应了触摸事件,后续的一系列事件都由它来处理,当滑动控件到顶端的时候,滑动事件都被下拉刷新控件消费掉了,传递不到它的子控件

  • Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    RecyclerView 已经出来很久了,但是在项目中之前都使用的是ListView,最近新的项目上了都大量的使用了RecycleView.尤其是瀑布流的下拉刷新,网上吧啦吧啦没有合适的自己总结了一哈. 先贴图上来看看: 使用RecyclerView实现上拉加载更多和下拉刷新的功能我自己有两种方式: 1.使用系统自带的Android.support.v4.widget.SwipeRefreshLayout这个控价来实现. 2.自定义的里面带有RecyleView的控件. 使用RecycleVie

  • Android自定义listview布局实现上拉加载下拉刷新功能

    Android自定义listview布局实现上拉加载下拉刷新功能

    listview实现上拉加载以及下拉刷新的方式有很多.下面是我写的一种自定义的布局,复用性也比较的强.首先就是继承的listview的自定义view.   AutoListView.Java: package com.example.mic.testdemo.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Bu

  • Android ListView实现上拉加载更多和下拉刷新功能

    Android ListView实现上拉加载更多和下拉刷新功能

    本文实例为大家介绍了Android ListView下拉刷新功能的实现方法和功能,供大家参考,具体内容如下 1.ListView优化方式 界面缓存:ViewHolder+convertView 分页加载:上拉刷新 图片缓存 快速滑动ListView禁止刷新 2.效果 3.上拉加载更多原理及实现 当我们手指滑动到listview最后位置的时候,我们触发加载数据的方法.这触发之前我们需要做一些工作,包括: 如何判断滑动到最后? 如何避免重复加载数据? 加载之后如何刷新界面? 1).界面实现AbsLi

随机推荐