网页|利用touch实现下拉刷新
欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
欢迎加入团队圈子!与作者面对面!直接点击!
1功能介绍
下拉刷新在常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。下拉刷新在下拉到松手的过程中,经历了三个状态分别是:当前手势滑动位置与初始位置差值大于零时,提示正在进行下拉刷新操作。之后当下拉到一定值时,显示松手释放后的操作提示。最后当下拉到达设定最大值松手时,执行回调,提示正在进行更新操作。如下图则为下拉刷新的实现效果:
图1 整体效果图
2下拉刷新的实现原理
在实现下拉刷新的过程中会用到touch事件。其中,touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发监听原生touchstart事件,记录其初始位置的值,并监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的translate属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值。监听原生touchend事件,若此时元素滑动达到最大值,则触发callback,同时将translate重设为0,元素回到初始位置。
3页面加载的实现
h5代码如下:
<!—html代码 下拉刷新页面 --> <div> <span id="text"></span> <span id='move'></span> </div> |
利用css对样式进行设置调整,主要还是用到了动画效果。主要样式代码如下:
.refresh #move{ width: 20px; height: 20px; /* border: 1px solid red; */ position: absolute; margin-left: 10px; top: 63%; } .refresh .square { width: 12px; height: 12px; border-radius: 4px; background-color: #cbcccc; } .square { animation: loadingG 1.5s cubic-bezier(.17,.37,.43,.67) infinite; } @keyframes loadingG { 0% {transform: translate(0,0) rotate(0deg);} 50% {transform: translate(70px,0) rotate(360deg);} 100% {transform: translate(0,0) rotate(0deg);} } |
利用JavaScript实现下拉刷新的效果:
// 下拉刷新页面 //onload是window窗口对象的事件属性,语句是把“匿名函数”赋值给window的onload事件属性,当window加载完成时会触发onload事件,也就触发了“匿名函数”,执行函数体内的语句。 window.onload = function () { var Y ,newY; // 监听页面touch事件 var touch = document.getElementsByClassName('touch')[0]; //选择全部的类 touch.addEventListener('touchstart',function (e) {//侦听事件bai并处理相应的函数 var e = e || window.event; Y = e.changedTouches[0].pageY;//触点坐标选取 // console.log(Y); }); touch.addEventListener('touchmove',function () { var e = e ||window.event; newY = e.changedTouches[0].pageY; // console.log(newY); touchmove(Y,newY); }) touch.addEventListener('touchend',function (e) { var e = e || window.event; newY = e.changedTouches[0].pageY; // console.log(newY); touchend(Y,newY); }); } function touchmove (Y,newY) { console.log(Y +"||"+newY) var distance = newY -Y; if(distance>20){ $(‘.header’).animate({ //动画效果 ‘opacity’ : 0.8//透明度 },100); // console.log(distance); // document.getElementsByClassName('hrader')[0].style.opacity = 0.8; var refresh = document.getElementsByClassName('refresh')[0]; distance = distance > 100 ? 100 :distance; $('.refresh').css('height',distance+"px"); document.getElementById('text').innerHTML= "释放立即刷新..." $('#text').css('line-height',distance+40+"px"); } } function touchend(Y,newY){ var distance = newY -Y; if(distance>20){ //bai用来设置或获取位于对象起始和结du束标签内的HTML document.getElementById('text').innerHTML= "正在刷新"; document.getElementById('move').innerHTML="<div></div>" setTimeout(function(){ location.reload(); },2000); } |
END
主 编 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号:算法与编程之美
长按识别二维码关注我们!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!
网页|利用touch实现下拉刷新相关推荐
- 移动端touch实现下拉刷新
移动端实现下拉刷新 第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑 ...
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38238749,本文出自:[张鸿洋的博客] 群里一哥们今天聊天偶然提到这个git ...
- android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
Android开发中利用ListView实现一个渐变式的下拉刷新动画 发布时间:2020-11-23 16:50:31 来源:亿速云 阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...
- 移动端网页禁止下拉刷新css
禁止下拉刷新 下拉刷新是当前流行的移动开发模式.如果你不喜欢这样做,只需将overscroll-behavior-y属性的值设为contains即可达到此效果. body {overscroll-be ...
- html5网页自动下滑,HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码...
H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示: 默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏 正式内容 import $ from 'jquery'; expo ...
- 提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理? 小程序的发布流程(开发流程)分析下微信小程序的优劣势?小程序授权登录流程? 小程序支付如何实现
小程序部分常见面试题 提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度 用户行为预测 减少默认data的大小 组件化方案 分包预下载 小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
- uni-app【事件绑定、下拉刷新、上传图片、导航跳转、组件通讯】
目录 uni-app中的样式 uni-app中的数据绑定 插值表达式的使用 v-bind动态绑定属性 v-for的使用 uni中的事件 事件绑定 事件传参 uni的生命周期 应用的生命周期 页面的生命 ...
- html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- js 实现上拉加载和下拉刷新
目录 一.js 实现上拉加载 二.js 实现下拉刷新 三.注意事项 一.js 实现上拉加载 实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据. window.onscroll = f ...
- 原生JS实现下拉刷新(移动端)
原生JS实现下拉刷新(移动端) 主要利用touchstart.touchmove.touchend事件 结合CSS定位 <!DOCTYPE html> <html lang=&quo ...
最新文章
- 【python】解压文件
- dom4j读写xml文件
- 2019 ACM - ICPC 全国邀请赛(南昌) 题解(9 / 12)
- 双一流高校竟有超30所都筹建了医学院!这释放了什么信号?
- mysql城市联动表怎么建_MVC4.0搭建的省市县三联动,包含数据库
- Xcode 中设置部分文件ARC支持
- java设计模式_模版模式
- python客户价值分析_[Python数据挖掘]第7章、航空公司客户价值分析
- 1097 Deduplication on a Linked List (25 分)_35行代码AC
- Mockito框架学习 - how does expected annotation work
- text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法
- 手写一个简化版Tomcat
- nodejs linux复制文本,Nodejs 复制文件/文件夹的方法
- SQL ALTER TABLE 语句在项目中的使用
- Unity 导入高分辨率图片
- Java服务MQ消息队列容灾方案
- 【实习之T100开发】T100 单档程序开发,java工程师面试突击中华石杉
- 亚马逊云科技物联网产业创新峰会与你相聚蓉城
- java copy-on-write_COW奶牛!Copy On Write机制了解一下
- 产业分析:二次元产业研究报告
热门文章
- 凯叔讲故事显示未能连接到服务器,凯叔讲故事(免费收听)
- 计算机网络技术自主招生考试题,清华等17所高校2017年自主招生笔试真题
- Wi-Fi放大器、中继、桥接和mesh组网的理解
- 多次请求后tomcat网页假死
- 数学分析 - 多元函数的微分学
- 7-112 约分最简分式
- signature=0805b6a4f11b6551d9a746082990b689,Derived certificate based on changing identity
- web3应用与dApp理解
- python综合程序设计-基于树莓派的python GPIO编程-常用函数综合整理
- 拼多多优惠券bug造成千万损失引发的优惠券安全思考