移动端touch实现下拉刷新
来源:互联网 发布:哪里有淘宝店铺出售 编辑:程序博客网 时间:2024/05/18 02:19
移动端实现下拉刷新
第一部分:四个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>
0 0
- 移动端touch实现下拉刷新
- 移动端实现下拉刷新
- 移动端下拉刷新
- 移动端实现简单的下拉刷新【web前端】
- 移动端原声js + css3实现下拉刷新
- 移动端页面下拉刷新,
- 移动端的下拉刷新
- sencha touch下拉刷新上拉加载实现
- Android移动开发-下拉刷新SwipeRefreshLayout的实现
- 移动端基本touch事件实现
- sencha touch下拉刷新传参数问题
- 移动端html5 自动生成下拉刷新控件
- 移动端下拉刷新、上拉加载更多插件
- 移动端下拉刷新、上拉加载更多插件dropload
- 移动端页面上拉加载、下拉刷新插件
- listview实现下拉刷新
- EGOTableViewPullRefresh实现下拉刷新
- 下拉刷新的实现
- centos7下安装jenkins
- 关于优化,页面静态化
- ZOJ2201-No Brainer
- Swift中switch语句的匹配
- POJ 2674 Linear World
- 移动端touch实现下拉刷新
- bzoj1202 [HNOI2005]狡猾的商人
- 二十三、UI-Grid 调整列大小
- 将网页设置为允许 XMLHttpRequest 跨域访问
- 从Git仓库中恢复已删除的分支或丢失的commit
- BFS一周总结
- JAVA_IO_字符流文件写入
- leetcode题解-120. Triangle
- spring配置文件详解--真的蛮详细