English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Erster Teil: Vier touch-Ereignisse
1.touchstart: Es wird ein touchstart-Ereignis ausgelöst, wenn der Finger auf dem Bildschirm platziert wird (egal, wie viele es sind).
2.touchmove: Wenn wir mit dem Finger auf dem Bildschirm gleiten, wird dieses Ereignis kontinuierlich ausgelöst. Wenn wir nicht möchten, dass die Seite gleitet, können wir event.preventDefault verwenden, um dieses Standardverhalten zu verhindern.
3.touchend: Wenn der Finger nach dem Gleiten vom Bildschirm abgehoben wird, wird das touchend-Ereignis ausgelöst.
4.touchcancel: Wird ausgelöst, wenn das System die Verfolgung des Berührens stoppt. Zum Beispiel wird ein Alert-Dialog während des Berührens auf der Seite ausgelöst, dann wird dieses Ereignis ausgelöst, dieses Ereignis wird weniger verwendet.
Zweiter Teil: Vier touch-Objekte
1. touches, das ist ein Array-Objekt, das alle Fingerinformationen enthält, wenn nur ein Finger vorhanden ist, dann verwenden wir touches[0] zur Darstellung.
2. targetTouches . Die Informationen der Finger in der Zielregion.
3. changedTouches: Die Informationen des letzten Fingers, der das Ereignis ausgelöst hat.
4. touchend: Wenn die Informationen von touches und targetTouches gelöscht werden, wird die zuletzt gespeicherte Information von changedTouches verwendet, die am besten für die Berechnung der Fingerinformationen geeignet ist.
Dritter Teil: Beispiel1
Sehen wir uns zunächst das Diagramm an:
Sein Implementierungsprinzip ist sehr einfach, es reicht aus, die Positionseigenschaft des roten Kreises auf absolute zu setzen, dann wird, wenn wir ihn bewegen, das touchmove-Ereignis ausgelöst, seine Left und top auf die pageX und pageY des Ereignisses zu setzen, um sicherzustellen, dass der Auslösepunkt mit dem Mittelpunkt des Kreises übereinstimmt, müssen wir pageX um die Hälfte der Breite und pageY um die Hälfte der Höhe hinzufügen.
Quellcode folgt:
<!DOCTYPE html>
<html>
<head>
<title>touchExample</Titel>
<meta name="viewport" content="Breite=device-Breite,Benutzer-Skalierbar: nein,anfangs-Skalierbarkeit=1.0,minimum-Skalierbarkeit=1.0,maximum-Skalierbarkeit=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#touchDiv{
Position: absolut;
Breite: 50px;
height: 50px;
oben: 20px;
links: 20px;
text-Ausrichtung: zentriert;
line-height: 50px;
Farbe: weiß;
Ränder-Radius: 50%;
background-Farbe: rot;
}
</style>
</head>
<body>
<div id="touchDiv">Klicke mich</div>
<script>
var touchDiv = document.getElementById("touchDiv");
var x,y;
touchDiv.addEventListener("touchstart",canDrag);
touchDiv.addEventListener("touchmove",drag);
touchDiv.addEventListener("touchend",nodrag);
function canDrag (e) {
console.log("god beginnt");
}
function drag (e) {
$("#touchDiv").css("left",e.touches[0].pageX-25);
$("#touchDiv").css("top",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god endet");
}
</script>
</body>
</html>
Vierte Teil: Beispiel2
Dieser Beispiel ist die Implementierung der Funktion "Abwärts-Wischen zum Aktualisieren", das Ergebnis ist wie folgt:
Quellcode folgt:
<!DOCTYPE html>
<html>
<head>
<title>Abwärts-Wischen zum Aktualisieren</Titel>
<meta name="viewport" content="Breite=device-Breite,Benutzer-Skalierbar: nein,anfangs-Skalierbarkeit=1.0,minimum-Skalierbarkeit=1.0,maximum-Skalierbarkeit=1.0">
<style>
*{
Marke: 0;
Auffüllung: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-Ausrichtung: zentriert;
background-Farbe: blau;
Farbe: weiß;
font-size: 23px;
}
.drag_to_refresh{
Ausrichtung-Elemente: zentriert;
Auffüllung-links: 155px;
background-Farbe: #bbb;
Farbe: gelb;
Anzeige: nicht sichtbar;
}
.refresh{
height: 50px;
line-height: 50px;
text-Ausrichtung: zentriert;
background-Farbe: #bbb;
Farbe: grün;
Anzeige: nicht sichtbar;
}
.drag{
text-Ausrichtung: zentriert;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">Government Cloud</div>
<div class="drag_to_refresh"></div>
<div class="refresh">Wird aktualisiert...</div>
<div class="drag">E-Government Cloud (E-Government Cloud) gehört zur Government Cloud und kombiniert die Merkmale der Cloud-Computertechnologie, um die Verwaltung und Dienstleistungsfunctions der Regierung zu vereinfachen, zu optimieren und zu integrieren. Es realisiert durch informatische Mittel verschiedene Geschäftsprozesse und Funktionen in der Verwaltung und bietet den verschiedenen Ebenen der Regierungsbehörden eine zuverlässige IT-Plattform für die Grundlagen an.</div>
<script>
window.onload = function () {
var initX;
var drag_content = document.querySelector(".drag");
var drag_to_refresh = document.querySelector(".drag_to_refresh");
var refresh = document.querySelector(".refresh");
drag_content.addEventListener("touchmove",drag);
drag_content.addEventListener("touchstart",dragStart);
drag_content.addEventListener("touchend",dragEnd);
function dragStart(e){
initY = e.touches[0].pageY;
console.log(initX);
}
function drag (e){
drag_to_refresh.style.display = "block";
drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
console.log(drag_to_refresh.style.height);
if(parseInt(drag_to_refresh.style.height)>=100){
// 注意：因为height得到的值是px为单位，所以用parseInt解析
drag_to_refresh.style.height = "100px";
if(parseInt(drag_to_refresh.style.height)>80){
drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
drag_to_refresh.innerHTML = "松开刷新";
}
}
}
function dragEnd (e){
if(parseInt(drag_to_refresh.style.height)>80){
refresh.style.display = "block";
setTimeout(reload,1000);
}
drag_to_refresh.style.display = "none";
}
function reload () {
location.reload();
}
}
</script>
</body>
</html>
以上所述是小编为大家介绍的移动端touch实现下拉刷新功能，希望对大家有所帮助。如果大家有任何疑问，请给我留言，我会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
声明：本文内容来自网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@）进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。