* API web 7 eventos de pantalla táctil, efectos especiales comunes en terminales móviles, soluciones de retardo de clic, complementos de desarrollo comunes en terminales móviles, marcos de desarrollo comunes en terminales móviles, almacenamiento local

1.1. Eventos de la pantalla táctil

1.1.1 Descripción general de los eventos de la pantalla táctil

La compatibilidad del navegador móvil es mejor. No necesitamos considerar los problemas de compatibilidad con JS anteriores. Podemos usar el efecto de escritura JS nativo con confianza, pero el terminal móvil también tiene su propio lugar único. Por ejemplo, toque de evento táctil (también llamado evento táctil), tanto en Android como en IOS. El objeto táctil representa un punto de contacto. El punto táctil puede ser un dedo o un lápiz táctil. Los eventos de la pantalla táctil pueden responder al dedo (o lápiz) del usuario que opera en la pantalla o el panel táctil.

Los eventos comunes de la pantalla táctil son los siguientes:
Inserte la descripción de la imagen aquí

1.1.2 Objeto de evento táctil (TouchEvent)

TouchEvent es un tipo de evento que describe el cambio de estado del dedo en el plano táctil (pantalla táctil, panel táctil, etc.). Este tipo de evento se utiliza para describir uno o más contactos, permitiendo a los desarrolladores detectar el movimiento de contactos, el aumento y disminución de contactos, etc.

Los tres eventos de touchstart, touchmove y touchend tendrán cada uno objetos de evento.

Concéntrese en los objetos de eventos táctiles. Veamos una lista de tres objetos comunes:
Inserte la descripción de la imagen aquí

Debido a que generalmente registramos eventos táctiles para elementos, debemos recordar targetTocuhes

1.1.3 Arrastre el elemento en el terminal móvil

touchstart, touchmove, touch y puede realizar elementos de arrastre
Pero arrastrar el elemento requiere las coordenadas del dedo actual. Podemos usar pageX y pageY en targetTouches [0]
El principio de arrastrar en el terminal móvil: cuando el dedo se está moviendo, calcule la distancia que se ha movido el dedo. Luego use la posición original de la caja + la distancia movida por el dedo
La distancia que se mueve el dedo: la posición del dedo deslizándose menos la posición donde el dedo acaba de comenzar a tocarse

Tres pasos para arrastrar elementos:

(1) Touchstart del elemento táctil: obtenga las coordenadas iniciales del dedo y la posición original del cuadro al mismo tiempo

(2) Mueva el dedo touchmove: Calcule la distancia de deslizamiento del dedo y mueva el cuadro

(3) Deje que el dedo toque y:

Nota: El movimiento de los dedos también activará el desplazamiento de la pantalla, así que aquí para evitar el desplazamiento de pantalla predeterminado e.preventDefault ();

1.2. Efectos especiales comunes en dispositivos móviles

1.2.1 Caso: Carrusel móvil

移动端轮播图功能和基本PC端一致。

Puede reproducir imágenes automáticamente
Puedes arrastrar tu dedo para tocar el carrusel.

1.2.2. Análisis de casos:

Función de reproducción automática
Iniciar temporizador
Móvil móvil, puedes usar traducir para moverte
Si desea que la imagen se mueva con elegancia, agregue un efecto de transición
Función de reproducción automática: desplazamiento continuo
Tenga en cuenta que nuestra condición de juicio es esperar hasta que la imagen se desplace y luego juzgar, es decir, juzgar después de que se complete la transición.
En este momento, debe agregar una transición de detección completa transición de eventoend
Condición de evaluación: si el número de índice es igual a 3, significa que se alcanza la última imagen y el número de índice debe restablecerse a 0 en este momento
En este momento, la imagen, elimine el efecto de transición y luego mueva
Si el número de índice es menor que 0, significa retroceder y el número de índice es igual a 2.
En este momento, la imagen, elimine el efecto de transición y luego mueva

1.2.3 atributo classList

El atributo classList es un nuevo atributo en HTML5 que devuelve el nombre de clase del elemento. Sin embargo, las versiones superiores a ie10 son compatibles.

Este atributo se utiliza para agregar, eliminar y cambiar clases CSS en el elemento. Existen los siguientes métodos

Agregar clase:

element.classList.add （'类名'）；

focus.classList.add('current');

Quitar clase:

element.classList.remove （'类名'）;

focus.classList.remove('current');

Clase de cambio:

element.classList.toggle （'类名'）;

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

1.2.4. Estudio de caso

Pequeños puntos siguen el efecto de cambio.
Seleccione el li in ol con el nombre de la clase actual para eliminar el nombre de la clase eliminar
Deje que el pequeño li del número de índice actual agregue la suma actual
Sin embargo, está esperando cambiar después de que finalice la transición, por lo que está escrito en el evento de final de transición.
Carrusel de deslizamiento de dedos
La esencia es que ul sigue el dedo para moverse, que es simplemente arrastrar el elemento en el terminal móvil.
Inicio táctil del elemento táctil: obtenga las coordenadas iniciales del dedo
Mover el dedo touchmove: Calcule la distancia de deslizamiento del dedo y mueva el cuadro
Deje el toque del dedo: según la distancia de deslizamiento, hay diferentes situaciones
Si la distancia de movimiento es inferior a un determinado píxel, volverá a la posición original.
Si la distancia de movimiento es mayor que un determinado píxel, deslice el anterior y el siguiente.
El deslizamiento también se divide en deslizamiento hacia la izquierda y deslizamiento hacia la derecha. El criterio para juzgar es la distancia de movimiento positiva o negativa. Si es negativa, significa deslizarse hacia la izquierda y deslizarse hacia la derecha.
Si se desliza hacia la izquierda, reproduce el siguiente (índice ++)
Si desliza el dedo hacia la derecha, reproduce el anterior (índice--)

1.3.1. Caso: volver al principio

Cuando la página se desplace en algún lugar, se mostrará; de lo contrario, se ocultará.

Haga clic para volver al principio

1.3.2. Análisis de casos

Desplácese en algún lugar para mostrar
Evento: evento de desplazamiento de página de desplazamiento
Si la cabeza que se está rodando (window.pageYOffset) es mayor que un cierto valor
Haga clic en, window.scroll (0,0) para volver a la parte superior

1.4. Haga clic en la solución de retraso

Habrá un retraso de 300 ms para el evento de clic en el terminal móvil. La razón es que un doble toque para hacer zoom en la página en la pantalla del terminal móvil hará doble toque para hacer zoom.

solución:

1. Desactive el zoom. El navegador deshabilita el comportamiento de zoom de doble clic predeterminado y elimina el retraso de clic de 300 ms.

  <meta name="viewport" content="user-scalable=no">

2. Utilice el evento táctil para encapsular este evento y resolver el retraso de 300 ms.

El principio es:

Cuando nuestro dedo toca la pantalla, registramos el tiempo de toque actual
Cuando salimos de la pantalla con nuestro dedo, usamos el tiempo que dejamos para restar el tiempo que tocamos
Si el tiempo es inferior a 150ms y la pantalla no se ha deslizado, lo definimos como un clic.

el código se muestra a continuación:

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
    
    
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
    
    
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
    
    
            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
    
    
            if (!isMove && (Date.now() - startTime) < 150) {
    
      // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){
    
       // 执行代码  });

Utilice complementos. El complemento fastclick resuelve el retraso de 300 ms.

1.5. Complementos de desarrollo móvil de uso común

1.5.1. ¿Qué es un complemento?

El terminal móvil requiere un desarrollo rápido, por lo que a menudo usamos algunos complementos para ayudarme a completar la operación, entonces, ¿qué es un complemento?

El complemento JS es un archivo js, que está escrito de acuerdo con ciertas especificaciones, que es conveniente para los efectos de visualización del programa, tiene funciones específicas y es conveniente llamarlo. Como el diagrama de carrusel y el complemento de flujo de cascada.

Características: Generalmente existe específicamente para resolver un determinado problema, y su función es única y relativamente pequeña.

El animate.js que escribimos antes también se considera el complemento más simple

El complemento fastclick resuelve el retraso de 300 ms. Retraso de uso

Dirección del sitio web oficial de GitHub: https: // github.com/ftlabs/fastclick

1.5.2. Uso de complementos

Introduce archivos de complemento js.
Úselo de acuerdo con la gramática prescrita.
El complemento fastclick resuelve el retraso de 300 ms. Retraso de uso

Dirección del sitio web oficial de GitHub: https://github.com/ftlabs/fastclick

if ('addEventListener' in document) {
      
      
            document.addEventListener('DOMContentLoaded', function() {
      
      
                       FastClick.attach(document.body);
            }, false);
}

1.5.3. Uso del complemento Swiper

Dirección del sitio web oficial chino: https://www.swiper.com.cn/

Introduzca archivos relacionados con complementos.
Usar de acuerdo con la gramática prescrita.

1.5.4. Otros complementos móviles habituales

lsuperslide: http://www.superslide2.com/

l desplazamiento: https://github.com/cubiq/iscroll

1.5.5. Resumen del uso de complementos

1. Confirme las funciones implementadas por el complemento

2. Vaya al sitio web oficial para consultar las instrucciones.

3. Descarga el complemento

4. Abra el archivo de ejemplo de demostración, vea los archivos relacionados que deben importarse e importe

5. Copie la estructura html, estilo css y código js en el archivo de ejemplo de demostración.

1.5.6. Complemento de video móvil zy.media.js

H5 nos proporciona la etiqueta de video, pero el soporte del navegador es diferente.

Podemos resolver diferentes archivos de formato de video a través de la fuente.

Pero el estilo de apariencia, así como la pausa, reproducción, pantalla completa y otras funciones, solo podemos escribir nuestro propio código para resolver.

En este momento, podemos usar el método de complemento para hacerlo.

Podemos modificar el tamaño, color, posición y otros estilos de elementos a través de JS.

1.6. Marcos de desarrollo comunes para dispositivos móviles

1.6.1. Complemento de video móvil zy.media.js

Un framework, como su nombre indica, es un conjunto de arquitectura, que proporcionará a los usuarios una solución relativamente completa basada en sus propias características. El control del marco reside en el marco en sí, y el usuario tiene que desarrollar de acuerdo con una determinada especificación estipulada por el marco.

El complemento generalmente existe específicamente para resolver un determinado problema, y su función es única y relativamente pequeña.

Los marcos de front-end más utilizados incluyen Bootstrap, Vue, Angular, React, etc. Puede desarrollar tanto PC como dispositivos móviles

Los complementos móviles de front-end más utilizados incluyen swiper, superslide, iscroll, etc.

Marco: amplio y completo, un conjunto completo de soluciones.

Plug-in: pequeño y específico, una solución para una función determinada

1.6.2. Oreja

Bootstrap es un marco de desarrollo de front-end simple, intuitivo y poderoso que hace que el desarrollo web sea más rápido y fácil.

Puede desarrollar PC y terminales móviles.

Pasos para usar el complemento Bootstrap JS:

1. Introduzca archivos js relacionados

2. Copie la estructura HTML

3. Modifica el estilo correspondiente

4. Modifique los parámetros JS correspondientes.

1.7. Almacenamiento local

Con el rápido desarrollo de Internet, las aplicaciones basadas en la web son cada vez más comunes y, al mismo tiempo, cada vez más complejas. Para satisfacer diversas necesidades, se almacenará localmente una gran cantidad de datos. La especificación HTML5 propone soluciones relacionadas Programa.

1.7.1. Funciones de almacenamiento local

1. Los datos se almacenan en el navegador del usuario.

2. Fácil de configurar y leer, incluso se actualiza la página sin perder datos

3. Gran capacidad, sessionStorage es de aproximadamente 5 M, localStorage es de aproximadamente 20 M

4. Solo se pueden almacenar cadenas y los objetos se pueden almacenar después de codificar JSON.stringify ()

1.7.2.window.sessionStorage

1. El ciclo de vida consiste en cerrar la ventana del navegador.

2. Los datos se pueden compartir en la misma ventana (página)

3. Almacenar y utilizar en forma de pares clave-valor

Almacenamiento de datos:

sessionStorage.setItem(key, value)

recuperar datos:

sessionStorage.getItem(key)

borrar datos:

sessionStorage.removeItem(key)

Borrar datos: (todos borrados)

sessionStorage.clear()

1.7.3.window.localStorage

1. El período de declaración entra en vigor de forma permanente y la página cerrada también existirá a menos que se elimine manualmente.

2. Se pueden compartir varias ventanas (páginas) (se puede compartir el mismo navegador)

Almacenar y usar en forma de pares clave-valor

Almacenamiento de datos:

localStorage.setItem(key, value)

recuperar datos:

localStorage.getItem(key)

borrar datos:

localStorage.removeItem(key)

Borrar datos: (todos borrados)

localStorage.clear()

1.7.4. Caso: Recuerde el nombre de usuario

Si marca Recordar nombre de usuario, la próxima vez que el usuario abra el navegador, el último nombre de usuario que inició sesión se mostrará automáticamente en el cuadro de texto.

caso de estudio

Almacene datos y use el almacenamiento local
Cierre la página, también puede mostrar el nombre de usuario, por lo que se usa localStorage
Abra la página, primero determine si existe este nombre de usuario, si es así, muestre el nombre de usuario en el formulario y marque la casilla
El evento de cambio cuando cambia la casilla de verificación
Si está marcado, guardar, de lo contrario eliminar