移动端实现下拉刷新

第一部分：四个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>

转载于:https://www.cnblogs.com/libin-1/p/6413226.html

移动端touch实现下拉刷新相关推荐

微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
移动端网页禁止下拉刷新css
禁止下拉刷新下拉刷新是当前流行的移动开发模式.如果你不喜欢这样做,只需将overscroll-behavior-y属性的值设为contains即可达到此效果. body {overscroll-be ...
H5——移动端JQ实现下拉刷新、上拉加载更多
前言这里用的JQ库里免费插件__dropload,效果图在文末引入去上面链接里面下载内容,可以本地引入 <link rel="stylesheet" href=&quo ...
移动端下拉刷新原理和实例
移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下.其中用到了一些touch事件和一些DOM属性CSS3属性.直接上代码,代码里面有注释. & ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
下拉刷新和上拉加载 php,怎样操作vue2.0 移动端实现下拉刷新和上拉加载
这次给大家带来怎样操作vue2.0 移动端实现下拉刷新和上拉加载,操作vue2.0 移动端实现下拉刷新和上拉加载的注意事项有哪些,下面就是实战案例,一起来看一下. 直接上代码,不懂的多看几遍,下面我换 ...
原生JS实现下拉刷新（移动端）
原生JS实现下拉刷新(移动端) 主要利用touchstart.touchmove.touchend事件结合CSS定位 <!DOCTYPE html> <html lang=&quo ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...

移动端touch实现下拉刷新