Als ich kürzlich an einem mobilen Projekt arbeitete, musste ich eine entsprechende Schaltfläche zum Löschen implementieren, die angezeigt wird, wenn jedes Element auf einer Listenseite nach links geschoben wird. Tatsächlich ist es sehr einfach, diese Funktion zu implementieren. In diesem Artikel wird hauptsächlich beschrieben, wie die Löschschaltfläche beim Schieben nach links auf dem mobilen Terminal basierend auf js realisiert wird. Freunde, die sie benötigen, können sich auf Folgendes beziehen:
Kürzlich ist es bei der Arbeit an einem mobilen Terminalprojekt so Um zu erkennen, dass jedes Element einer Listenseite nach links verschoben wird, wird beim Schieben zunächst die entsprechende Löschschaltfläche angezeigt. Ursprünglich hatte ich daran gedacht, das Plug-in touch.js direkt zu verwenden, da ich dieses Plug-in zuvor bereits verwendet hatte Die Funktion war damals recht einfach zu verwenden. Als ich jedoch heute wieder mit der Verwendung dieser beiden Methoden begann, stellte ich fest, dass sie überhaupt keine Wirkung zeigten . Ich habe die Informationen online überprüft und die neuesten Versionen von zepto und touch.js heruntergeladen, aber ich weiß nicht, warum. Daher wurde dieses Plug-in aufgegeben.
Das Folgende ist der Code, den ich später implementiert habe. Tatsächlich verwendet er das Touch-Ereignis von nativem js und kombiniert dann die Koordinaten des Berührungspunkts, um die linken und rechten Wischbewegungen zu bestimmen,
<!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>Vielleicht ist Ihnen auch aufgefallen, dass natives js am Anfang der Seite hinzugefügt wurde, um die mobile Anpassung zu implementieren, hauptsächlich um die bessere Anzeige mobiler Seiten auf Bildschirmen von zu ermöglichen , auch um den Designentwurf auf Bildschirmen unterschiedlicher Größe mit sehr kleinen Fehlern besser darzustellen. Die Haupteinheit ist rem.
Mobile adaptive js
<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>Das Prinzip ist eigentlich sehr einfach, nämlich den Wurzelknoten-HTML entsprechend zu berechnen auf verschiedene Bildschirme font-size und verwenden Sie dann das Prinzip der Berechnung von rem relativ zum font-size des Stammknoten-HTML, um die Größe, den Abstand usw. verschiedener Elemente zu erkennen.
Einige Leute sagen, dass man solche JS nicht verwenden muss, um zu beurteilen, dass man auch CSS3 responsive @ verwenden kann.media screen Tatsächlich denke ich, dass es mittlerweile Android-Bildschirme in verschiedenen Größen gibt sind so aktiv, @media screenEs kommt mir etwas überwältigend vor, damit umzugehen.
Die Darstellung ist wie folgt:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium hilfreich ist. Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
So verwenden Sie js, um die horizontale Drag-and-Drop-Navigationsleistenfunktion zu implementieren
Beschränken Sie den Upload des Uploads in js Nummer
Das obige ist der detaillierte Inhalt vonJS implementiert die Funktion, auf dem mobilen Endgerät nach links zu schieben, um die Löschschaltfläche anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
