Cómo usar H5 para implementar un ejemplo de un rotor táctil

Al comienzo de la parte delantera, comparta el proceso de implementación de la carcasa de la pantalla táctil en el teléfono móvil.

1. Sobre la deslizamiento del ciclo de soporte

2. El ancho se puede configurar arbitrariamente, no es necesario ancho con la pantalla

3. La página puede rodar verticalmente

4. Puede establecer la conmutación de elementos de monitoreo de recuperación

5. JS puro, no use ninguna biblioteca de terceros

1. Suponga que el ancho del subelemento .Item es 375px, utilizando posicionamiento absoluto para colocar todos los sub -elementos en el elemento principal

2. Establezca el ancho del elemento principal .Carusel a 375px, que es el mismo que el sub -elemento.

3. Agregue eventos táctiles al elemento principal. CAROUSEL: TouchStart, Touchmove, Touchend

4. Cuando presione su dedo, guarde la posición inicial (cliente)

5. Al deslizar los dedos, juzga la dirección de deslizar por la distancia deslizante:

① Deslice el dedo hacia la izquierda y mueva los elementos en el lado derecho del elemento actual y el elemento actual al mismo tiempo

② Slipa los dedos hacia la derecha y mueva los elementos en el lado izquierdo de los elementos actuales y actuales al mismo tiempo

6. Cuando se levanten los dedos, determine si se debe cambiar a la página siguiente mediante la distancia deslizante

① La distancia de movimiento no excede el 50%del ancho del subelemento y retrocede la página actual a la posición inicial sin cambiar el elemento actual.

② La distancia de mudanza excede el 50%del ancho del elemento infantil, y el elemento actual se cambia al siguiente elemento.

③ Establezca la propiedad de transformación del elemento actual para traducir3D (0px, 0px, 0px) y

④ Establezca el atributo de transformación del siguiente elemento infantil a traducir3D (375px, 0px, 0px)

⑤ Establezca el atributo de transformación del elemento infantil anterior para traducir3D (-375px, 0px, 0px) y el atributo de índice Z +1

⑥ Establezca la propiedad del índice Z de todos los demás subelementos en el valor predeterminado

7. El primer elemento del primer elemento infantil es el último elemento, y el siguiente elemento del último elemento es el primer elemento, que es implementado por la lista Circular Linked.

Al moverse, establezca la propiedad de transformación del elemento infantil .Item, no el elemento principal.

HTML y CSS

 // html <div class = Carousel OnTouchStart => <div class = background: #3b76c0> </h3> </div> </div> <div class = itemle = backgr OUnd: #58c03b;> <h3> item- item- 2 </h3> </div> <div class = item style = fondo: #c03b25;> <h3> item-3 </h3> </iv> <div class = background: #e0a718;> <h3> itemem -4 </h3> </div> <div class = item style = fondo: #c03eac;> <h3> item-5 </h3> </div> </div>

 //css.carausel {Altura: 50%;

Js

Establecer el estado inicial

Primero realice una lista vinculada de dos vías para mantener los elementos en el componente de rotación.

 Nodo de función (datos) {this.data = data; Head = null; Last = this.head;} ​​else {this.head.prev = node; Nodo .index = _nodes.length;

Con la lista vinculada, cree un ejemplo vinculado, agregue el sub -elemento a la lista vinculada y establezca algunos estados iniciales

 var _container = document.queryselector (. + contenqueClass); i ++) {list.append (nuevo nodo (_items [i]));} var _prev = null; El zar -_ActivezIndex = _normalzindex + 1; elementos para agregar 1

Cuando presione su dedo, guarde la posición inicial

 _Container.addeventListener (touchStart, function (e) {// e.preventDefault (); // La anotación de esta línea de código evitará que la página se enrolle verticalmente en el elemento. Luego, luego cliente; // guardar la posición de El dedo estrictamente = touch.clienty;

Deslice los dedos en la pantalla y mueva los dedos en la página

 _Container.addeventListener (touchmove, function (e) {// e.preventDefault (); // La anotación de este código de línea evitará el dedo deslizamiento en la dirección x var deltay = touch.Clienty -Starty; ser izquierdo y derecho. sus elementos izquierdo y derecho al mismo tiempo Moveitems (traducir);

Cuando su dedo sale de la pantalla, el cálculo eventualmente permanecerá en qué página

 _Container.addeventListener (Touchend, function (e) {// e.preventDefault (); // Cancelación del código de esta línea evitará que la página se desplace vertical en el elemento // calcule el dedo el tiempo para permanecer en la pantalla var deltat = nueva fecha (). es la distancia, ¿cuánto es la distancia entre la distancia deslizante. del 50%de la pantalla, regrese a la página anterior if (math.abs (traducir)/_ItemWidth <0.5) {isRollback = true;} else {// Si la distancia deslizante es 50%mayor que la pantalla, deslice hacia el Página siguiente traducir = traducir <0?

Para facilitar el uso, encapsulé todo el proceso de implementación en una biblioteca y agregué el método Prev (), Next (), que es muy simple:

 <script src = lib/carousel.js> </script> createCarousel (Carousel, It, true) .BindTouchEvent () .SetItemChangedHandler (OnpageChangeded); // Si el ciclo debe jugar la tercera configuración de los parámetros, True se juega verdadero por ciclo

Lo anterior es todo el contenido de este artículo.