English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Prima parte: Quattro eventi touch
1.touchstart: Appena il polpastrello viene messo sullo schermo (indipendentemente dal numero), viene attivato l'evento touchstart.
2.touchmove: Quando usiamo il polpastrello per scorrere lo schermo, questo evento viene attivato continuamente. Se non vogliamo che la pagina si muova, possiamo utilizzare event.preventDefault per bloccare questo comportamento predefinito.
3.touchend: Quando il polpastrello si muove e lascia lo schermo, viene attivato l'evento touchend.
4.touchcancel: Viene attivato quando il sistema smette di seguire il tocco. Ad esempio, durante un tocco, se si visualizza all'improvviso una finestra di alert(), viene attivato questo evento. Questo evento non viene utilizzato molto spesso.
Seconda parte: Quattro oggetti touch
1. touches, questo è un oggetto array-like che contiene tutte le informazioni sui polpastrelli. Se c'è solo un polpastrello, possiamo utilizzare touches[0] per rappresentarlo.
2. targetTouches: Le informazioni sui polpastrelli nella regione del target.
3. changedTouches: Le informazioni sul polpastrello che ha attivato l'evento recentemente.
4. touchend: Quando le informazioni di touches e targetTouches vengono eliminate, changedTouches conserva l'ultima informazione, meglio utilizzata per calcolare le informazioni sui polpastrelli.
Terza parte: Esempio 1
Ecco una visualizzazione dell'effetto:
Il suo principio di implementazione è molto semplice, è sufficiente impostare l'attributo di posizione del cerchio rosso in absolute, quindi, quando lo scorriamo, viene attivato l'evento touchmove, impostando Left e top su event.pageX e pageY. Per garantire che il punto di attivazione centrale coincida con il centro del cerchio, è sufficiente aggiungere metà della larghezza a pageX e metà dell'altezza a pageY.
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>touchExample</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#touchDiv{
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
text-align: center;
line-height: 50px;
color:white;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="touchDiv">Tocca me</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开始");
}
function drag (e) {
$("#touchDiv").css("left",e.touches[0].pageX-25);
$("#touchDiv").css("top",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god结束");
}
</script>
</body>
</html>
第四部分：实例2
这个实例就是下拉刷新功能的实现，效果如下：
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>下拉刷新</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
margin:0;
padding: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color:white;
font-size: 23px;
}
.drag_to_refresh{
align-items: center;
padding-left: 155px;
background-color: #bbb;
color:yellow;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #bbb;
color: green;
display: none;
}
.drag{
text-align: center;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">Nuvola governativa</div>
<div class="drag_to_refresh"></div>
<div class="refresh">Aggiornamento in corso...</div>
<div class="drag">La nuvola elettronica amministrativa (E-government cloud) appartiene alla nuvola governativa, combinando le caratteristiche della tecnologia cloud computing, semplifica, ottimizza e integra le funzioni di gestione e servizio del governo, e realizza vari processi di gestione e servizi funzionali attraverso mezzi informatizzati, fornendo una piattaforma IT di base affidabile per i dipartimenti di tutti i livelli del governo.</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){
// Attenzione: poiché il valore di height è espresso in unità px, utilizzare parseInt per analizzare
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 = "Rilasciare per aggiornare";
}
}
}
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>
Il seguente è il tutorial di implementazione della funzione di aggiornamento scorrevole per la versione mobile che l'editor ha introdotto a tutti voi, speriamo che sia utile a tutti voi. Se avete qualsiasi domanda, lasciate un commento e l'editor risponderà tempestivamente. Ringraziamo anche tutti voi per il supporto al sito web del tutorial di urla!
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore è proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato volontariamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di copyright, invia una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di infrangere i diritti d'autore.