Androidモバイル端末のtouchでプルダウンリフレッシュ機能を実現する

第1部：4つのtouchイベント

　　1.touchstart：指をスクリーンに置いただけで（どれだけの指でも）、touchstartイベントがトリガーされます。

　　2.touchmove: 手指でスクリーンをスライドするときに、このイベントが連続してトリガーされます。ページがスライドするようにしないようにする場合は、event.preventDefaultを使用してこのデフォルト動作を阻止できます。

　　3.touchend: 指がスクリーンから離れたときに、touchendイベントがトリガーされます。

　　4.touchcancel: タッチを追跡することを停止する際にトリガーされます。例えば、タッチ中に突然ページにalert()を表示するとき、このイベントがトリガーされ、このイベントはあまり使われません。

第2部：4つのtouchオブジェクト

　　 1. touches、これは配列オブジェクトであり、すべての指情報を含んでいます。もし一つの指しかない場合、touches[0]を使って表現します。

　　 2. targetTouches 。ターゲットエリアの手指情報。

　　　　 3. changedTouches：このイベントが最後にトリガーされた指の情報。

　　　　 4. touchend時、touchesとtargetTouches情報が削除され、changedTouchesが保存する最後の情報が、指情報を計算するのに最適です。

第3部：インスタンス1

　　まず效果图を見てみましょう：

　　その実装の原理は非常にシンプルで、赤い円のposition属性をabsoluteに設定し、それをスライドすると、touchmoveイベントがトリガーされ、LeftとtopをeventのpageXとpageYに設定するだけで、トリガー中心と円の中心が同じ位置にあることを保証するために、pageXにwidthの半分を加え、pageYにheightの半分を加えるだけです。

　　以下はソースコードです：

<!DOCTYPE html>
<html>
<head>
 <title>touchExample</title>
 <meta name="viewport" content="幅=device-幅,ユーザー-可拡大: 否,初期-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{
   位置: 相対的;
   幅: 5height:
   line 5height:
   top: 2height:
   left: 2height:
   padding:-中央に配置
   em;-line 5height:
   色: 白色;
   枠線-半径: 50%;
   background-色: 紅;
  }
 </px;
</style>
head>
 <div id="touchDiv">点我</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終了");
  }
 </script>
</body>
</html>

　第4部：例2

　　この例は下拉リフレッシュ機能の実装であり、以下のようになります：

以下はソースコードです：

<!DOCTYPE html>
<html>
<head>
 <title>下拉リフレッシュ</title>
 <meta name="viewport" content="幅=device-幅,ユーザー-可拡大: 否,初期-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 <style>
  *{
   余白: 0;
   余白: 0;
   0px;-font15size:
  }
  .header{
   line 5height:
   em;-line 5height:
   padding:-中央に配置
   background-色: 青色;
   色: 白色;
   0px;-font 23size:
  }
  .drag_to_refresh{
   配置-items: 中央;
   余白-left: 155size:
   background-色: #bbb;
   色: 黄色;
   表示: 非表示;
  }
  .refresh{
   line 5height:
   em;-line 5height:
   padding:-中央に配置
   background-色: #bbb;
   色: 緑;
   表示: 非表示;
  }
  .drag{
   padding:-中央に配置
   background-background
   color: lightgray;
   position: relative;2height:
   padding:-text 1indent:
   em;-line 3height:
   0px;-font18size:
  }
 </px;
</style>
head>
 <body>/div>
 <div class="header">行政云</div>
 <div class="drag_to_refresh"></div>
 <div class="refresh">リフレッシュ中...<-<div class="drag">政府電子政务雲（E/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){
   // 注意：heightが得られる値は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>

以上は編集者が皆さんに紹介したモバイル端 touch で下押しリフレッシュ機能の実現方法です。皆さんに役立つことを願っています。何か疑問があれば、コメントを残してください。編集者はすぐに回答します。また、呐喊教程サイトのサポートに感謝しています。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に提供されたコンテンツであり、本サイトは所有権を有しておらず、人工的な編集もなく、関連する法的責任も負いません。著作権侵害の可能性のある内容が見つかった場合は、メールを送信して：notice#w までご連絡ください。3codebox.com（メール送信時は、#を@に変更してください）で報告してください。関連する証拠を提供していただければ、本サイトは即座に侵害する可能性のあるコンテンツを削除します。

基礎教程