Comment utiliser H5 pour implémenter un exemple de rotor tactile

Au début du front-end, partagez le processus d'implémentation de la carcasse tactile sur le téléphone mobile.

1. Cycle de support glissant

2. La largeur peut être définie arbitrairement, pas besoin de largeur avec l'écran

3. La page peut rouler verticalement

4. Vous pouvez définir la commutation des éléments de surveillance de la récupération

5. Pure JS, n'utilisez aucune bibliothèque tierce

1. Supposons que la largeur du sous-élévation .tem est 375px, en utilisant un positionnement absolu pour placer tous les sous-éléments dans l'élément parent

2. Réglez la largeur de l'élément parent. Carousel sur 375px, ce qui est le même que la largeur de la sous-élément.

3. Ajouter des événements Touch à l'élément parent. Carel: Touchstart, TouchMove, Touchend

4. Lorsque vous appuyez sur votre doigt, enregistrez la position initiale (ClientX)

5. Lorsque vous glissez vos doigts, jugez la direction de glisser par la distance de glissement:

① Faites glisser le doigt vers la gauche et déplacez les éléments sur le côté droit de l'élément actuel et de l'élément actuel en même temps

② Glissez vos doigts vers la droite et déplacez les éléments sur le côté gauche des éléments actuels et actuels en même temps

6. Lorsque vos doigts sont levés, déterminez s'il faut passer à la page suivante en glissant la distance

① La distance de mouvement ne dépasse pas 50% de la largeur de la sous-élévation et ne recule de la page actuelle à la position initiale sans changer l'élément actuel.

② La distance mobile dépasse 50% de la largeur de l'élément enfant et l'élément actuel est passé à l'élément suivant.

③ Définissez la propriété de transformation de l'élément actuel pour traduire3d (0px, 0px, 0px) et

④ Définissez l'attribut de transformation de l'élément enfant suivant pour traduire3d (375px, 0px, 0px)

⑤ Définissez l'attribut de transformation de l'élément enfant précédent pour traduire3d (-375px, 0px, 0px) et l'attribut z-index +1

⑥ Définissez la propriété Z-Index de tous les autres sous-éléments sur la valeur par défaut

7. Le premier élément du premier élément enfant est le dernier élément, et le prochain élément du dernier élément est le premier élément, qui est implémenté par la liste liée circulaire.

Lorsque vous déplacez, définissez la propriété de transformation de l'élément enfant .tem, pas l'élément parent. Carousel

HTML & CSS

 /- 2 </h3> </ div> <div class = item style = background: # c03b25;> <h3> item-3 </h3> </div> <div class = background: # e0a718;> <h3> item -4 </h3> </ div> <div class = item style = background: # c03eac;> <h3> item-5 </h3> </div> </div>

 //cs.carouche {hauteur: 50%;

Js

Définir l'état initial

Réalisez d'abord une liste liée à deux voies pour maintenir les éléments du composant de rotation.

 Node de fonction (données) {this.data = data; Head = null; Last = this.head;} ​​else {this.head.prev = node; Node .Index = _Nodes.Length;

Avec la liste liée, créez un exemple lié, ajoutez le sous-élément dans la liste liée et définissez certains états initiaux

 var _Container = document.QuerySelector (. + Contenerclass); i ++) {list.append (nouveau nœud (_Items [i]);} var _prev = null; Le zar _ActivezIndex = _Normalzindex + 1; Éléments pour ajouter 1

Lorsque vous appuyez sur votre doigt, enregistrez la position initiale

 _Container.AddeventListener (TouchStart, fonction (e) {// e.PreventDefault (); // L'annotation de cette ligne de code empêchera la page de rouler verticalement dans l'élément. Ensuite, alors clientx; // Enregistrer la position de la position de la position de la position de le doigt strict = touch.clienty; = false;

Faites glisser vos doigts sur l'écran et déplacez vos doigts sur la page

 _Container.addeventListener (TouchMove, fonction (e) {// e.preventDefault (); // L'annotation de ce code de ligne empêchera la page de l'élément de rouler verticalement. Le doigt glissant dans la direction x var deltay = touch.clienty -starty; à gauche et à droite. ses éléments gauche et droit en même temps MoveItems (traduire);

Lorsque votre doigt quitte l'écran, le calcul restera finalement sur quelle page

 _Container.AddeventListener (TouchEnd, fonction (e) {// e.PreventDefault (); // L'annulation du code de cette ligne empêchera la page verticale verticale dans l'élément // Calculez le doigt le temps pour rester sur l'écran var delat = new Date (). La distance, quelle est la distance entre la distance de glissement. à 50% de l'écran, revenez à la page précédente if (math.abs (tradlater) / _itemWidth <0,5) {Isrollback = true;} else {// Si la distance de glissement est 50% supérieure à l'écran, glissez vers le Page suivante Translate = Translate <0?

Afin de faciliter l'utilisation, j'ai encapsulé l'intégralité du processus d'implémentation dans une bibliothèque et ajouté la méthode PREV (), suivant (), ce qui est très simple:

 <script src = lib / carousel.js> </cript> createCaRousel (carrousel, it, true) .bindtouchEvent () .setItemChangedHandler (onPageChanged); // Si les paramètres du troisième paramètre doivent être joués par cycle, True est joué par cycle

Ce qui précède est tout le contenu de cet article.