English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Primera parte: Cuatro eventos touch
1.touchstart: Se desencadena el evento touchstart siempre y cuando se coloque el dedo en la pantalla (sin importar cuántos),
2.touchmove: Cuando deslizamos el dedo en la pantalla, este evento se desencadena continuamente. Si no queremos que la página se deslice, podemos usar preventDefault del evento para evitar este comportamiento predeterminado.
3.touchend: Cuando el dedo se desliza y se sale de la pantalla, se desencadena el evento touchend.
4.touchcancel: Se desencadena cuando el sistema detiene el seguimiento del toque. Por ejemplo, si se lanza un cuadro de alerta en el proceso de toque, se desencadenará este evento, este evento no se utiliza mucho.
Segunda parte: Cuatro objetos touch
1. touches, es un objeto de tipo array, que contiene toda la información de los dedos, si hay solo un dedo, entonces utilizamos touches[0] para representarlo.
2. targetTouches: Información de los dedos en la región del objetivo.
3. changedTouches: Información del dedo que desencadenó el evento más recientemente.
4. touchend: Cuando se elimina la información de touches y targetTouches, se guarda la última información en changedTouches, que es mejor utilizada para calcular la información del dedo.
Tercera parte: Ejemplo1
Veamos el efecto gráfico primero:
Su principio de implementación es muy simple, es decir, establecer la propiedad de posición del círculo rojo en absolute, luego, cuando lo deslizamos, se desencadena el evento touchmove, y se establecen Left y top en pageX y pageY del evento, para asegurar que el punto de desencadenamiento central esté en la misma posición que el centro del círculo, solo necesita sumar la mitad del ancho a pageX y la mitad de la altura a pageY.
El código fuente es el siguiente:
<!DOCTYPE html>
<html>
<cabeza>
<title>touchExample</título>
<meta name="viewport" content="ancho=device-ancho,user-escalable=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{
posición: absoluto;
ancho: 50px;
height: 50px;
top: 20px;
left: 20px;
text-alineación: centro;
line-height: 50px;
color: blanco;
borde-radio: 50%;
background-color: rojo;
}
</style>
</head>
<body>
<div id="touchDiv">púlsame</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 comienza");
}
function drag (e) {
$("#touchDiv").css("left",e.touches[0].pageX-25);
$("#touchDiv").css("top",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god finaliza");
}
</script>
</body>
</html>
Parte cuarta: ejemplo2
Este ejemplo es la implementación de la función de actualización deslizante, el efecto es el siguiente:
El código fuente es el siguiente:
<!DOCTYPE html>
<html>
<cabeza>
<título>Actualizar deslizante</título>
<meta name="viewport" content="ancho=device-ancho,user-escalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
margen:0;
padding: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-alineación: centro;
background-color: azul;
color: blanco;
font-size: 23px;
}
.drag_to_refresh{
alineación-items: centro;
padding-left: 155px;
background-color: #bbb;
color: amarillo;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-alineación: centro;
background-color: #bbb;
color: verde;
display: none;
}
.drag{
text-alineación: centro;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">政务云</div>
<div class="drag_to_refresh"></div>
<div class="refresh">刷新中...</div>
<div class="drag">电子政务云（E-government cloud）属于政府云，结合了云计算技术的特点，对政府管理和服务职能进行精简、优化、整合，并通过信息化手段在政务上实现各种业务流程办理和职能服务，为政府各级部门提供可靠的基础IT服务平台。</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){
// Advertencia: ya que el valor de height se obtiene en unidades de px, se utiliza parseInt para analizar
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 = "Suelte para actualizar";
}
}
}
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>
Lo que se ha mencionado anteriormente es lo que el editor les ha presentado sobre la implementación de la función de actualización deslizante en el dispositivo móvil, esperando que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También agradezco mucho el apoyo de todos a la página web de tutorial de grito!
Declaración: El contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido ha sido subido por usuarios de Internet de manera autónoma y no ha sido editado por humanos. Este sitio no posee los derechos de propiedad y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.