Android移动端touch实现下拉刷新功能_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-10 23:08:14 点击率：次

第一部分：四个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实现下拉刷新功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# touch实现下拉刷新 # android实现下拉刷新 # 安卓(Android)实现3DTouch效果 # Android判断touch事件点是否在view范围内的方法 # 30分钟搞清楚Android Touch事件分发机制 # Android中处理apple-touch-icon详解 # 浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详 # Android的Touch事件处理机制介绍 # 当我们 # 小编 # 放在 # 在此 # 只需 # 设为 # 屏幕上 # 将其 # 这是一个 # 给大家 # 只有一个 # 可以使用 # 要将 # 设置为 # 几只 # 用手指 # 所述 # 先看 # 第一部分 # 给我留言

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：肇庆免费网站制作,索尼售后服务网站？

下一篇：详解Laravel中文版本下载的步骤

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：肇庆免费网站制作,索尼售后服务网站？

下一篇：详解Laravel中文版本下载的步骤