Verwenden Sie swipe.js in Zepto, um Karussellbilder mit nicht funktionierenden SwipeUp- und SwipeDown-Javascript-Kenntnissen zu erstellen

Bei der mobilen Webentwicklung werden aufgrund der kleinen mobilen Schnittstelle häufig Karussells verwendet, um mehr Bilder anzuzeigen, und auch das Problem des mobilen Datenverkehrs muss berücksichtigt werden. Nach Rücksprache mit anderen und Baidu habe ich persönlich das Gefühl, dass dies der Fall ist. js ist besser zu verwenden.

Es ist ein reines Javascript-Tool, das nicht mit anderen js-Bibliotheken importiert werden muss. Es ist auch mit jQuery und zepto kompatibel. Die komprimierte Version ist nur 6 KB groß und eignet sich für die mobile Entwicklung 🎜>https://github .com/thebird/swipe

Die Verwendungsmethode auf Git ist ziemlich klar. Der Schlüsselcode ist wie folgt

<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);

Es ist am besten, das HTML-Baummodell des in .swipe verschachtelten .swipe-wrap nicht zu ändern. Sie können es durch andere ersetzen, z. B. li usw.

Für die Erstellung des Karussells sind nur wenige Codeteile erforderlich. Im eigentlichen Projekt, insbesondere im Banner oben auf der Homepage, müssen jedoch der Seitenindex und die Parameter des Steuerelements hinzugefügt werden muss konfiguriert werden. ,

Die Hauptparameterkonfiguration ist wie folgt:

startSlide Integer (Standard: 0) – Die Position, an der mit dem Scrollen begonnen werden soll

Geschwindigkeits-Ganzzahl (Standard: 300) – Scrollintervall der Animation (Sekunden)

auto Integer – Automatische Diashow starten (Zeit zwischen den Dias in Millisekunden)

continuous Boolean (Standard: true) – Erstellt eine Endlosschleife (ob eine Schleife eingeblendet werden soll, wenn alle Animationen enden)

disableScroll Boolean (Standard: false) – ob das Scrollen der Folie beim Scrollen der Bildlaufleiste gestoppt werden soll

stopPropagation Boolean (Standard:false) – ob das Sprudeln von Ereignissen gestoppt werden soll

Rückruffunktion – Rückruffunktion während der Diashow läuft

transitionEnd-Funktion – Rückruffunktion, wenn die Animation endet

Und seine Haupt-API-Funktionen sind wie folgt:

prev()：Vorherige Seite

next(): nächste Seite

getPos(): Ruft den Index der aktuellen Seite ab

getNumSlides(): Anzahl aller Elemente abrufen

Slide(Index, Dauer): Sliding-Methode

Das Folgende ist der tatsächliche Code, der im Projekt verwendet wird

<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 und SwipeDown in Zepto haben keine Wirkung

Ich habe mir Zepto angeschaut und als ich einige Ereignisse darin gesehen habe, bin ich auf ein Problem gestoßen:

$(‘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
})

Auf dem mobilen Endgerät haben swipeUp und swipeDown keine Wirkung, aber die anderen funktionieren. Was ist los?

Lösung 1:

Zepto muss das touch.js-Modul einführen. Es ist nicht auf der offiziellen Website verfügbar, um es herunterzuladen und dann touch.js einzuführen

Lösung 2:

liegt daran, dass das Standard-Pulldown-Ereignis des Browsers blockiert ist und der folgende Code hinzugefügt wird.

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