Beispiel für die Verwendung des Swiper-Plugins zur Implementierung eines Karussells in Vue

Hallo zusammen, ich arbeite derzeit an einem Projekt, das Ele.me imitiert. Ich werde meine Projekterfahrung hier synchronisieren und mit Ihnen teilen!

vue - Verwenden Sie das Swiper-Plugin, um ein Karussell zu implementieren

Herunterladen und installieren: npm install swiper --save

Der HTML-Teil von Msite.vue:

<!--Verwenden Sie Swiper im msite_nav-Navigationsbereich der Seite-->
<div Klasse="Swiper-Container">
	<div Klasse="swiper-wrapper">
        <div Klasse="swiper-slide">1</div>
        <div Klasse="swiper-slide">2</div>
        <div Klasse="swiper-slide">3</div>
    </div>
    <!-- Swiper-Karussellpunkte-->
    <div Klasse="swiper-pagination"></div>
</div>

Der Skriptteil wird eingeführt und initialisiert:

<Skript>
Swiper von „swiper“ importieren
// Gleichzeitig die CSS-Datei von Swiper importieren: import 'swiper/dist/css/swiper.min.css'
Standard exportieren {
  //Beachten Sie, dass Swiper initialisiert werden sollte, nachdem die Seite geladen (gemountet) wurde. mounted () {
    //Erstellen Sie eine Swiper-Instanz, um das Karussell zu implementieren. neuer Swiper('.swiper-container', {
      Autoplay: wahr,
      // Wenn Sie eine Seitennummerierung benötigen: {
        el: '.swiper-pagination',
        anklickbar: wahr
      }
   })
  }
}
</Skript>

Es ist zu beachten, dass beim Importieren von CSS-Dateien die Importmethode aufgrund unterschiedlicher Versionen unterschiedlich ist. Andernfalls wird ein Fehler gemeldet, da die entsprechende CSS-Datei nicht gefunden werden kann. Beispielsweise die neueste Version

importiere „swiper/swiper-bundle.min.css“

Informationen zur spezifischen Verwendung finden Sie in der [offiziellen Swiper-Dokumentation].

Zu beachten ist, dass Sie nach der Datenanforderung eine Swiper-Instanz erstellen müssen

Verwenden Sie watch und $nextTick, um den Karussellfehler zu beheben

Der Paging-Swiper sollte eigentlich initialisiert werden, nachdem die Karussellliste angezeigt wird (d. h., das Kategorien-Array enthält Daten).

Am Anfang ist „categories“ ein leeres Array. Die Karussellliste wird nur angezeigt, wenn Daten vorhanden sind. Um die Datenänderungen von Kategorien zu überwachen, wird „watch“ verwendet.

//Erstellen Sie eine neue Überwachung, um Kategorien zu überwachen
betrachten:
    Kategorien (Wert) { // Es sind Daten im Kategorien-Array vorhanden // Aber die Schnittstelle wurde noch nicht asynchron aktualisiert}
}
// Löschen Sie den neuen Swiper...-Code im gemounteten

Tatsächlich sind das Ändern der Statusdaten im Status (Kategorien empfangen Daten) und das asynchrone Aktualisieren der Schnittstelle (Anzeigen der Karussellliste) zwei Schritte. Daher müssen Sie eine Weile warten, bis die Schnittstelle das asynchrone Update abgeschlossen hat, bevor Sie Swiper initialisieren können.

// Die Verwendung von setTimeout kann den Effekt erzielen, aber das Timing ist nicht genau setTimeout(() => {
	//Erstellen Sie ein Swiper-Instanzobjekt, um das Karussell zu implementieren new Swiper('.swiper-container', {
          Autoplay: wahr,
          // Wenn Sie eine Seitennummerierung benötigen: {
            el: '.swiper-pagination',
            anklickbar: wahr
          }
	})
}, 100)

Verwenden Sie vm.$nextTick( [callback] ), um ein Swiper-Objekt zu erstellen, unmittelbar nachdem Sie darauf gewartet haben, dass die Schnittstelle die asynchrone Aktualisierung abschließt

// Verwenden Sie es sofort nach der Änderung der Daten und warten Sie dann, bis das DOM aktualisiert ist.
dies.$nextTick(() => {
	// Sobald die Aktualisierung der Schnittstelle abgeschlossen ist, führen Sie den Rückruf sofort aus new Swiper('.swiper-container', {
    	Autoplay: wahr,
    	Pagination:
    	el: '.swiper-pagination',
    	anklickbar: wahr
    }
})

Oben sind die Einzelheiten des Beispiels, wie Vue das Swiper-Plugin zur Implementierung des Karussells verwendet. Weitere Informationen dazu, wie Vue das Swiper-Plugin zur Implementierung des Karussells verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!