网页|利用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 团队
微信号:算法与编程之美
长按识别二维码关注我们!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!