js meniru operasi menggelongsor kenalan ke kiri dan meluncur keluar butang padam dalam kemahiran QQ

Contoh dalam artikel ini adalah untuk berkongsi dengan anda cara mengendalikan kenalan yang serupa dengan QQ: slaid ke kiri dan slaid keluar butang padam. Jika anda melepaskannya apabila ia meluncur lebih daripada separuh jalan, ia akan secara automatik meluncur ke bawah Jika anda melepaskannya apabila ia kurang daripada separuh jalan, ia akan kembali ke kedudukan asal.

Pelaksanaan js tulen
Menggunakan gerakan sentuh h5 dan acara lain dan menggunakan js untuk menukar atribut terjemah css3 secara dinamik untuk mencapai kesan animasi:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
 <title>html5向左滑动删除特效</title>
 <style>
 * {
  padding: 0;
  margin: 0;
  list-style: none;
 }
 
 header {
  background: #f7483b;
  border-bottom: 1px solid #ccc
 }
 
 header h2 {
  text-align: center;
  line-height: 54px;
  font-size: 16px;
  color: #fff
 }
 
 .list-ul {
  overflow: hidden
 }
 
 .list-li {
  line-height: 60px;
  border-bottom: 1px solid #fcfcfc;
  position: relative;
  padding: 0 12px;
  color: #666;
  background: #f2f2f2;
  -webkit-transform: translateX(0px);
 }
 
 .btn {
  position: absolute;
  top: 0;
  right: -80px;
  text-align: center;
  background: #ffcb20;
  color: #fff;
  width: 80px
 }
 </style>
 <script>
 /*
  * 描述：html5苹果手机向左滑动删除特效
  */
 window.addEventListener('load', function() {
  var initX; //触摸位置
  var moveX; //滑动时的位置
  var X = 0; //移动距离
  var objX = 0; //目标对象位置
  window.addEventListener('touchstart', function(event) {
   event.preventDefault();
   var obj = event.target.parentNode;
   if (obj.className == "list-li") {
    initX = event.targetTouches[0].pageX;
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   }
   if (objX == 0) {
    window.addEventListener('touchmove', function(event) {
     event.preventDefault();
     var obj = event.target.parentNode;
     if (obj.className == "list-li") {
      moveX = event.targetTouches[0].pageX;
      X = moveX - initX;
      if (X >= 0) {
       obj.style.WebkitTransform = "translateX(" + 0 + "px)";
      } else if (X < 0) {
       var l = Math.abs(X);
       obj.style.WebkitTransform = "translateX(" + -l + "px)";
       if (l > 80) {
        l = 80;
        obj.style.WebkitTransform = "translateX(" + -l + "px)";
       }
      }
     }
    });
   } else if (objX < 0) {
    window.addEventListener('touchmove', function(event) {
     event.preventDefault();
     var obj = event.target.parentNode;
     if (obj.className == "list-li") {
      moveX = event.targetTouches[0].pageX;
      X = moveX - initX;
      if (X >= 0) {
       var r = -80 + Math.abs(X);
       obj.style.WebkitTransform = "translateX(" + r + "px)";
       if (r > 0) {
        r = 0;
        obj.style.WebkitTransform = "translateX(" + r + "px)";
       }
      } else { //向左滑动
       obj.style.WebkitTransform = "translateX(" + -80 + "px)";
      }
     }
    });
   }

  })
  window.addEventListener('touchend', function(event) {
   event.preventDefault();
   var obj = event.target.parentNode;
   if (obj.className == "list-li") {
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
    if (objX > -40) {
     obj.style.WebkitTransform = "translateX(" + 0 + "px)";
     objX = 0;
    } else {
     obj.style.WebkitTransform = "translateX(" + -80 + "px)";
     objX = -80;
    }
   }
  })
 })
 </script>
</head>

<body>
 <header>
  <h2>消息列表</h2>
 </header>
 <section class="list">
  <ul class="list-ul">
   <li id="li" class="list-li">
    <div class="con">
     你的快递到了，请到楼下签收
    </div>
    <div class="btn">删除</div>
   </li>
   <li class="list-li">
    <div class="con">
     哇，你在干嘛，快点来啊就等你了
    </div>
    <div class="btn">删除</div>
   </li>
  </ul>
 </section>
</body>

</html>

Salin selepas log masuk

Dijadikan pemalam zepto
Dalam projek sebenar, kami mungkin menggunakan fungsi ini di banyak tempat. Sekarang kita akan menjadikan fungsi ini sebagai pemalam zepto untuk kegunaan mudah nanti.

Untuk pemalam ini, kami hanya melaksanakan fungsi ini, dan kemudian memasukkan parameter (nama gaya butang padam) untuk membenarkan program mengira jarak gelongsor yang diperlukan dalam js untuk kegunaan semula yang mudah.

zepto.touchWipe.js

/**
 * zepto插件：向左滑动删除动效
 * 使用方法：$('.itemWipe').touchWipe({itemDelete: '.item-delete'});
 * 参数：itemDelete 删除按钮的样式名
 */
;
(function($) {
 $.fn.touchWipe = function(option) {
  var defaults = {
   itemDelete: '.item-delete', //删除元素
  };
  var opts = $.extend({}, defaults, option); //配置选项

  var delWidth = $(opts.itemDelete).width();

  var initX; //触摸位置
  var moveX; //滑动时的位置
  var X = 0; //移动距离
  var objX = 0; //目标对象位置
  $(this).on('touchstart', function(event) {
   event.preventDefault();
   var obj = this;
   initX = event.targetTouches[0].pageX;
   objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   if (objX == 0) {
    $(this).on('touchmove', function(event) {
     event.preventDefault();
     var obj = this;
     moveX = event.targetTouches[0].pageX;
     X = moveX - initX;
     if (X >= 0) {
      obj.style.WebkitTransform = "translateX(" + 0 + "px)";
     } else if (X < 0) {
      var l = Math.abs(X);
      obj.style.WebkitTransform = "translateX(" + -l + "px)";
      if (l > delWidth) {
       l = delWidth;
       obj.style.WebkitTransform = "translateX(" + -l + "px)";
      }
     }
    });
   } else if (objX < 0) {
    $(this).on('touchmove', function(event) {
     event.preventDefault();
     var obj = this;
     moveX = event.targetTouches[0].pageX;
     X = moveX - initX;
     if (X >= 0) {
      var r = -delWidth + Math.abs(X);
      obj.style.WebkitTransform = "translateX(" + r + "px)";
      if (r > 0) {
       r = 0;
       obj.style.WebkitTransform = "translateX(" + r + "px)";
      }
     } else { //向左滑动
      obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
     }
    });
   }

  })
  $(this).on('touchend', function(event) {
   event.preventDefault();
   var obj = this;
   objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   if (objX > -delWidth / 2) {
    obj.style.transition = "all 0.2s";
    obj.style.WebkitTransform = "translateX(" + 0 + "px)";
    obj.style.transition = "all 0";
    objX = 0;
   } else {
    obj.style.transition = "all 0.2s";
    obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
    obj.style.transition = "all 0";
    objX = -delWidth;
   }
  })

  //链式返回
  return this;
 };

})(Zepto);

Salin selepas log masuk

touchWipe.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>html5向左滑动删除特效</title>

<style>
  *{ padding:0; margin:0; list-style: none;}
  header{ background: #f7483b; border-bottom: 1px solid #ccc}
  header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff}
  .list-ul{ overflow: hidden}
  .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666;
    background: #f2f2f2;
    -webkit-transform: translateX(0px);
  }
  .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}
</style>

</head>
<body>
<header>
  <h2>消息列表</h2>
</header>
<section class="list">
  <ul class="list-ul">
    <li id="li" class="list-li">
      <div class="con">
        你的快递到了，请到楼下签收
      </div>
      <div class="btn">删除</div>
    </li>
    <li class="list-li">
      <div class="con">
        哇，你在干嘛，快点来啊就等你了
      </div>
      <div class="btn">删除</div>
    </li>
  </ul>
</section>

<p>X: <span id="X"></span></p>
<p>objX: <span id="objX"></span></p>
<p>initX: <span id="initX"></span></p>
<p>moveX: <span id="moveX"></span></p>

<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript" src="zepto.touchWipe.js"></script>
<script type="text/javascript">
  $(function() {
  $('.list-li').touchWipe({itemDelete: '.btn'});
  });

</script>
</body>
</html>

Salin selepas log masuk

Kesan:

Kesan aplikasi dalam projek sebenar:

Hapuskan BUG
Dalam langkah di atas, kami pada dasarnya telah mencapai fungsi yang kami perlukan. Tetapi mempunyai beberapa soalan:

1. Butang padam di sebelah kanan gagal diklik kerana span tidak boleh menggelembung ke butang besar;

2. Kami menambahkan peristiwa gerakan sentuh pada div dan menggunakan preventDefault() untuk menyekat acara penyemak imbas asal.

Masalah pertama lebih mudah untuk diselesaikan Kami mengalih keluar span terus dan menulis "padam" ke dalam :sebelum dalam css, seperti ini:

.itemWipe .item-delete:before {
  content: '删除';
  color: #fff;
}

Salin selepas log masuk

Untuk masalah kedua, di Internet dikatakan menggunakan iscroll untuk menyelesaikannya. Di sini kita merujuk kepada operasi gelongsor kenalan dalam QQ mudah alih.

Prinsip am: Pada permulaan gelongsor, tentukan sama ada paksi-Y atau paksi-X bergerak lebih banyak. Jika pergerakan paksi-X adalah besar, ia dinilai sebagai operasi padam gelongsor, dan kemudian kami menggunakan preventDefault();

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.