Android移動(dòng)端touch實(shí)現(xiàn)下拉刷新功能

更新時(shí)間：2017年02月18日 09:51:06 作者：返回主頁 918之初

這篇文章主要介紹了移動(dòng)端touch實(shí)現(xiàn)下拉刷新功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

第一部分：四個(gè)touch事件

　　1.touchstart：只要將手指放在了屏幕上（而不管是幾只）,都會(huì)觸發(fā)touchstart事件。

　　2.touchmove: 當(dāng)我們用手指在屏幕上滑動(dòng)時(shí)，這個(gè)事件會(huì)被連續(xù)觸發(fā)。如果我們不希望頁面隨之滑動(dòng)，我們可以使用event的preventDefault來阻止這個(gè)默認(rèn)行為。

　　3.touchend: 當(dāng)手指滑動(dòng)后離開屏幕，這時(shí)就觸發(fā)了touchend事件。

　　4.touchcancel: 系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用。

第二部分：四個(gè)touch對(duì)象

　 1. touches，這是一個(gè)類數(shù)組對(duì)象，包含了所有的手指信息，如果只有一個(gè)手指，那么我們用touches[0]來表示。

　 2. targetTouches 。手指在目標(biāo)區(qū)域的手指信息。

3. changedTouches：最近一次觸發(fā)該事件的手指信息。

4. touchend時(shí)，touches與targetTouches信息會(huì)被刪除，changedTouches保存的最后一次的信息，最好用于計(jì)算手指信息。

第三部分：實(shí)例1

　　先看效果圖：

　　它的實(shí)現(xiàn)原理非常簡(jiǎn)單，就是將紅色圓形的postion屬性設(shè)為absolute，然后，當(dāng)我們滑動(dòng)它時(shí)，就觸發(fā)了touchmove事件，將其Left和top設(shè)置為event的pageX和pageY即可，為保證觸發(fā)中心與圓心在同一位置，只需將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">點(diǎn)我</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結(jié)束");
  }
 </script>
</body>
</html>

第四部分：實(shí)例2

　　這個(gè)實(shí)例就是下拉刷新功能的實(shí)現(xiàn)，效果如下：

源碼如下：

<!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">政務(wù)云</div>
 <div class="drag_to_refresh"></div>
 <div class="refresh">刷新中...</div>
 <div class="drag">電子政務(wù)云（E-government cloud）屬于政府云，結(jié)合了云計(jì)算技術(shù)的特點(diǎn)，對(duì)政府管理和服務(wù)職能進(jìn)行精簡(jiǎn)、優(yōu)化、整合，并通過信息化手段在政務(wù)上實(shí)現(xiàn)各種業(yè)務(wù)流程辦理和職能服務(wù)，為政府各級(jí)部門提供可靠的基礎(chǔ)IT服務(wù)平臺(tái)。</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){
   // 注意：因?yàn)閔eight得到的值是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>

以上所述是小編給大家介紹的移動(dòng)端touch實(shí)現(xiàn)下拉刷新功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: