تحقيق ميزة تحديث السحب من أسفل في تطبيقات Android باستخدام touch

جزء أول: أربعة أحداث touch

　　1.touchstart: يتم إطلاق حدث touchstart عند وضع الأصبع على الشاشة (بغض النظر عن عدد الأصابع).

　　2.touchmove: عند تمرير الأصبع على الشاشة، يتم إطلاق هذا الحدث بشكل مستمر. إذا لم نرغب في أن يتحرك الصفحة معها، يمكننا استخدام event.preventDefault لمنع هذا السلوك الافتراضي.

　　3.touchend: عند انسحاب الأصبع من الشاشة، يتم إطلاق حدث touchend.

　　4.touchcancel: يتم إطلاق هذا الحدث عند توقف النظام عن متابعة اللمس. على سبيل المثال، إذا تم إطلاق نافذة alert() في عملية اللمس، يتم إطلاق هذا الحدث، ويُستخدم بشكل قليل.

جزء ثاني: أربعة كائنات touch

　　 1. touches، وهو كائن قائمة شبيهة، يحتوي على جميع معلومات الأصابع، إذا كان هناك أصبع واحد فقط، فإننا نستخدم touches[0] للإشارة إليه.

　　 2. targetTouches. معلومات الأصابع في منطقة الهدف.

　　　　 3. changedTouches: معلومات الأصابع التي تم تفعيل الحدث الأخير.

　　　　 4. عند حدوث touchend، يتم حذف معلومات touches وtargetTouches، وتُحفظ معلومات changedTouches الأخيرة، وتُستخدم بشكل أفضل لحساب معلومات الأصابع.

جزء ثالث: مثال 1

　　نبدأ بعرض الصورة:

　　مبدأ تنفيذها بسيط جدًا، وهو إعداد خاصية position للدائرة الحمراء على absolute، ثم، عند تمريرها، يتم إطلاق حدث touchmove، وإعداد left وtop على pageX وpageY الخاصين بالحدث، لضمان أن يكون مركز التفعيل في نفس المكان مع مركز الدائرة، يكفي إضافة نصف عرض الدائرة إلى pageX وإضافة نصف الارتفاع إلى pageY.

　　源码如下：

<!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">النقر هنا</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>

　第四部分：实例2

　　这个实例就是下拉刷新功能的实现，效果如下：

源码如下：

<!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">الخدمات الحكومية السحابية</div>
 <div class="drag_to_refresh"></div>
 <div class="refresh">جار刷新...</div>
 <div class="drag">الخدمات الحكومية السحابية (E-government cloud) تتبع السحابة الحكومية وتجمع بين خصائص تقنية السحابة، لتجديد وتحسين وتوحيد وظائف الإدارة والخدمات الحكومية، وتحقق من خلال وسائل التكنولوجيا المعلوماتية تنفيذ جميع العمليات التجارية والخدمات الوظيفية في الحكومة، وتقدم خدمات IT الأساسية الموثوقة للمستويات المختلفة من الإدارات الحكومية.</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){
   // ملاحظة: لأن القيمة التي حصلت عليها هي 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>

ما ذكرته أعلاه هو ما قدمه المحرر لكم حول تحقيق ميزة التحديث السحبي على الجهاز المحمول، آمل أن يكون هذا مفيدًا لكم، إذا كان لديكم أي استفسارات، يرجى ترك تعليق، وسأقوم بالرد على رسائلكم في الوقت المناسب. وأشكركم أيضًا على دعمكم لموقع呐喊 لتعليم البرمجة!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المحتوى لصاحب الحقوق، تم جمع المحتوى من قبل المستخدمين على الإنترنت الذين قدموه بأنفسهم، لا يملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا اكتشفتم محتوى يشتبه في انتهاك حقوق النسخ، فلا تترددوا في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لتقديم الشكوى، وتقديم الدليل ذات الصلة، وسيتم حذف المحتوى المزعوم فور التحقق منه.

تعليمية الأساس

سيكون لك أيضًا