Utilisez swipe.js dans zepto pour créer des images de carrousel avec les compétences swipeUp et swipeDown qui ne fonctionnent pas_javascript

Dans le développement Web mobile, en raison de la petite interface mobile, les carrousels sont souvent utilisés afin d'afficher plus d'images et le problème du trafic mobile doit également être pris en considération Après avoir consulté les autres et Baidu, je ressens personnellement ce swipe. js est mieux utilisé.

C'est un outil javascript pur qui n'a pas besoin d'être importé avec d'autres bibliothèques js. Il est également compatible avec jQuery et zepto. La version compressée ne fait que 6 Ko et est adaptée au développement mobile. 🎜>https://github .com/thebird/swipe

La méthode d'utilisation sur git est assez claire. Le code clé est le suivant

<div id='slider' class='swipe'>
 <div class='swipe-wrap'>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
}
.swipe-wrap {
 overflow: hidden;
 position: relative;
}
.swipe-wrap > div {
 float:left;
 width:100%;
 position: relative;
}

window.mySwipe = Swipe(document.getElementById('slider'),opt);

Il est préférable de ne pas modifier le modèle d'arborescence html du .swipe imbriqué .swipe-wrap Quant au div le plus interne, vous pouvez le remplacer par d'autres, comme li, etc.

.

Seuls quelques morceaux de code sont nécessaires pour terminer la production du carrousel. Cependant, dans le projet lui-même, notamment la bannière en haut de la page d'accueil, il faut ajouter l'index de la page, ainsi que les paramètres du contrôle. doit être configuré.,

Sa configuration des paramètres principaux est la suivante :

startSlide Integer (par défaut : 0) - La position pour commencer le défilement

vitesse Integer (par défaut : 300) - intervalle de défilement de l'animation (secondes)

auto Integer - Démarrer le diaporama automatique (durée entre les diapositives en millisecondes)

Booléen continu (par défaut : vrai) - Créer une boucle infinie (si glisser dans une boucle lorsque toutes les animations se terminent)

disableScroll Boolean (default:false) - s'il faut arrêter le défilement de la diapositive lors du défilement de la barre de défilement

stopPropagation Boolean (default:false) - s'il faut arrêter le bouillonnement des événements

Fonction de rappel - fonction de rappel pendant l'exécution du diaporama

transitionEnd Function - fonction de rappel à la fin de l'animation

Et ses principales fonctions API sont les suivantes :

prev()：Page précédente

suivant() : page suivante

getPos() : Récupère l'index de la page actuelle

getNumSlides() : obtenez le nombre de tous les éléments

slide(index, durée) : méthode glissante

Ce qui suit est le code réel utilisé dans le projet

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img src="img/1.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/2.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/3.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/4.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/5.jpg">
            </a>
          </li>
        </ul>
        <ul class="slide-trigger">
          <li class="cur"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
.banner {
        width: 100%;
        position: relative;
      }
      .banner .swipe {
        overflow: hidden;
        position: relative;
      }
      .banner .swipe-wrap {
        overflow: hidden;
        position: relative;
        list-style: none;
      }
      .banner .swipe-wrap li {
        float: left;
        position: relative;
      }
      .banner img {
        width: 100%;
        vertical-align: middle;
      }
      .banner .slide-trigger {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        list-style: none;
      }
      .banner .slide-trigger li {
        width: 10px;
        height: 10px;
        background: #FFF;
        margin: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
      }
      .banner .slide-trigger .cur {
        background: #2fc7c9;
      }
var slider = $('#slider');
    slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
    window.mySwipe = new Swipe(document.getElementById('slider'), {
      speed: 400,
      auto: 3000,
      callback: function(index, elem) {
        slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
      }
    });

SwipeUp et swipeDown dans zepto n'ont aucun effet

Je regardais zepto, et quand j'y ai vu certains événements, j'ai trouvé un problème :

$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})

Sur le terminal mobile, swipeUp et swipeDown n'ont aucun effet, mais les autres fonctionnent. Que se passe-t-il ?

Solution 1 :

Zepto doit introduire le module touch.js. Il n'est pas disponible sur le site officiel. Allez sur github pour le télécharger puis introduisez touch.js

.

Solution 2 :

est dû au fait que l'événement déroulant par défaut du navigateur est bloqué et que le code suivant est ajouté.

document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);