网页|利用touch实现下拉刷新

算法与编程之美

发布于 2020-07-16 18:03:03

1.7K0

发布于 2020-07-16 18:03:03

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 团队

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript