Lorsque je travaillais récemment sur un projet mobile, j'avais besoin de réaliser qu'un bouton de suppression correspondant apparaîtrait lorsque chaque élément d'une page de liste était glissé vers la gauche. En fait, il est très simple d'implémenter cette fonction. Cet article présente principalement comment réaliser le bouton Supprimer lors du glissement vers la gauche sur le terminal mobile basé sur js. Les amis qui en ont besoin peuvent se référer à ce qui suit
Récemment, lorsqu'ils travaillent sur un projet de terminal mobile, c'est le cas. Il est nécessaire de se rendre compte que chaque élément d'une page de liste se déplace vers la gauche. Le bouton de suppression correspondant apparaît lors du glissement. Au départ, j'avais pensé à utiliser directement le plug-in touch.js de zepto, car j'avais déjà utilisé ce plug-in pour obtenir le même résultat. C'était assez facile à utiliser à l'époque, il suffit d'utiliser ses méthodes swipeLeft et swipeRight. Mais quand j'ai recommencé à utiliser cette fonction aujourd'hui, j'ai découvert que ces deux méthodes n'avaient aucun effet lorsqu'elles étaient utilisées et qu'il n'y avait aucune réponse. . 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('.list li a');
for(var i = 0; i < container.length; i++){
var x, y, X, Y, swipeX, swipeY;
container[i].addEventListener('touchstart', function(event) {
x = event.changedTouches[0].pageX;
y = event.changedTouches[0].pageY;
swipeX = true;
swipeY = true ;
if(expansion){ //判断是否展开，如果展开则收起
expansion.className = "";
}
});
container[i].addEventListener('touchmove', 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 :
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Veuillez faire attention au contenu plus connexe du site Web chinois PHP !
Recommandations associées :
Comment utiliser js pour implémenter la fonction de barre de navigation glisser-déposer horizontale
Restreindre le téléchargement de uploadify dans js Numéro
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
