Heim > Artikel > Web-Frontend > Realisieren Sie basierend auf JS die Funktion der Löschtaste, wenn Sie auf dem mobilen Endgerät nach links schieben
Realisieren Sie basierend auf JS die Funktion der Löschtaste, wenn Sie auf dem mobilen Endgerät nach links schieben
- 高洛峰Original
- 2017-02-23 17:17:121959Durchsuche
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. Ursprünglich wollte ich das touch.js-Plug-in von zepto direkt verwenden. weil die gleiche Funktion bereits zuvor implementiert wurde und sie recht einfach zu verwenden war. Als ich jedoch heute wieder anfing, diese Funktion zu verwenden, stellte ich fest, dass dies der Fall war Zwei Methoden zeigten bei der Anwendung keine Wirkung und es gab überhaupt keine Reaktion. 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 Plugin 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 mobile Seite besser arbeiten zu lassen Die Anzeige dient auch dazu, den Entwurfsentwurf auf Bildschirmen unterschiedlicher Größe mit sehr kleinen Fehlern besser darzustellen.
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 die Wurzelberechnung auf verschiedenen Bildschirmen font-size des HTML-Knotens und verwenden Sie dann das Prinzip der Berechnung von REM relativ zum font-size des HTML-Wurzelknotens, 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 direkt CSS3 responsive @ verwenden kann.media screen Tatsächlich denke ich, dass es jetzt Android-Bildschirme in verschiedenen Größen gibt sind so aktiv, @media screenEs scheint ein wenig überwältigend, damit umzugehen.
Das Rendering ist wie folgt:
Das Obige ist die JS-basierte Implementierung der Funktion, auf dem mobilen Endgerät nach links zu schieben, um sie anzuzeigen Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen dann rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!
Weitere verwandte Artikel, die auf JS basieren und die Löschschaltflächenfunktion beim Verschieben nach links auf dem mobilen Endgerät realisieren, finden Sie auf der chinesischen PHP-Website!