網頁|利用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

---