recherche

Maison  >  Article  >  interface Web  >  Basé sur JS, réalisez la fonction du bouton de suppression en glissant vers la gauche sur le terminal mobile

Basé sur JS, réalisez la fonction du bouton de suppression en glissant vers la gauche sur le terminal mobile

高洛峰
高洛峰original
2017-02-23 17:17:122014parcourir

Lorsque je travaillais récemment sur un projet mobile, j'avais besoin d'implémenter un bouton de suppression correspondant qui apparaît lorsque chaque élément d'une page de liste est glissé vers la gauche. Je voulais à l'origine utiliser directement le plug-in touch.js de zepto, parce que la même fonction a été implémentée auparavant. J'ai utilisé ce plug-in, et il était assez facile à utiliser. Vous pouvez simplement utiliser ses méthodes swipeLeft et swipeRight. Cependant, lorsque j'ai recommencé à utiliser cette fonction aujourd'hui, j'ai trouvé que celles-ci. deux méthodes n'ont eu aucun effet lorsqu'elles ont été utilisées et il n'y a eu aucune réponse du tout. J'ai vérifié les informations en ligne et téléchargé les dernières versions de zepto et touch.js, mais cela n'a pas fonctionné, je ne sais pas pourquoi ? Ce plugin a donc été abandonné.

Ce qui suit est le code que j'ai implémenté plus tard. En fait, il utilise l'événement tactile de js natif, puis combine les coordonnées du point de contact pour déterminer les balayages gauche et droit, 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js侧滑显示删除按钮</title>
<style>
*{margin:0;padding:0;}
body{font-size:.14rem;}
li{list-style:none;}
i{font-style:normal;}
a{color:#393939;text-decoration:none;}
.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
</style>
<script>
//计算根节点HTML的字体大小
function resizeRoot(){
 var deviceWidth = document.documentElement.clientWidth,
  num = 750,
  num1 = num / 100;
 if(deviceWidth > num){
  deviceWidth = num; 
 }
 document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();

window.onresize = function(){
 resizeRoot();
};
</script>
</head>
<body>
<section>
<p class="list">
 <ul>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮1<i>删除</i></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮2<i>删除</i></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮3<i>删除</i></a></li>
 </ul>
</p>
<script>
//侧滑显示删除按钮
var expansion = null; //是否存在展开的list
var container = document.querySelectorAll(&#39;.list li a&#39;);
for(var i = 0; i < container.length; i++){ 
 var x, y, X, Y, swipeX, swipeY;
 container[i].addEventListener(&#39;touchstart&#39;, function(event) {
  x = event.changedTouches[0].pageX;
  y = event.changedTouches[0].pageY;
  swipeX = true;
  swipeY = true ;
  if(expansion){ //判断是否展开，如果展开则收起
   expansion.className = "";
  }  
 });
 container[i].addEventListener(&#39;touchmove&#39;, function(event){
  
  X = event.changedTouches[0].pageX;
  Y = event.changedTouches[0].pageY;  
  // 左右滑动
  if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
   // 阻止事件冒泡
   event.stopPropagation();
   if(X - x > 10){ //右滑
    event.preventDefault();
    this.className = ""; //右滑收起
   }
   if(x - X > 10){ //左滑
    event.preventDefault();
    this.className = "swipeleft"; //左滑展开
    expansion = this;
   }
   swipeY = false;
  }
  // 上下滑动
  if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
   swipeX = false;
  }  
 });
}
</script>
</body>
</html>

Peut-être avez-vous également remarqué que du js natif a été ajouté au début de la page pour mettre en œuvre l'adaptation mobile, principalement pour faciliter le fonctionnement de la page mobile des écrans de différentes tailles. L'affichage permet également de mieux présenter le projet de conception sur des écrans de différentes tailles avec de très petites erreurs. L'unité principale utilisée est le rem.

Js adaptatif mobile

<script>
//计算根节点HTML的字体大小
function resizeRoot(){
 var deviceWidth = document.documentElement.clientWidth,
  num = 750,
  num1 = num / 100;
 if(deviceWidth > num){
  deviceWidth = num; 
 }
 document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();

window.onresize = function(){
 resizeRoot();
};
</script>

Le principe est en fait très simple, il s'agit de calculer la racine en fonction sur différents écrans font-size du nœud racine html, puis utiliser le principe de calcul du rem par rapport au font-size du nœud racine html pour réaliser la taille, l'espacement, etc.

Certaines personnes disent qu'il n'est pas nécessaire d'utiliser de tels js pour juger. Vous pouvez également utiliser directement CSS3 responsive @media screen En fait, je pense que maintenant, il y a des écrans Android de différentes tailles. sont tellement actifs, @media screenCela semble un peu écrasant de gérer cela.

Le rendu est le suivant :

Basé sur JS, réalisez la fonction du bouton de suppression en glissant vers la gauche sur le terminal mobile

Ce qui précède est l'introduction de l'éditeur à l'implémentation basée sur JS de la fonction du bouton Supprimer lors du glissement vers la gauche sur le terminal mobile. , j'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles connexes basés sur JS pour réaliser la fonction du bouton de suppression lorsque vous glissez vers la gauche sur le terminal mobile, veuillez faire attention au site Web PHP chinois !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js obtient les différentes largeurs et hauteurs du navigateur et de l'écranArticle suivant：js obtient les différentes largeurs et hauteurs du navigateur et de l'écran

Articles Liés

Voir plus