Wie importiere ich das Swiper-Plugin in Vue?

In diesem Artikel wird hauptsächlich die Methode zum Importieren des Swiper-Plug-Ins in das Vue-Projekt vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Versionsauswahl

Swiper ist ein häufig verwendetes Plug-in und wurde jetzt in die vierte Generation iteriert: swiper4.

Die am häufigsten verwendeten Versionen sind Swiper3 und Swiper4. Ich habe mich für Swiper3 entschieden.

Installation

Installieren Sie die neueste Version 3.4.2 von swiper3:

npm i swiper@3.4.2 -S

Hier finden Sie ein wenig Wissen, wie Sie alle Versionsnummern des Knotens anzeigen können Pakete:

npm view 包名 versions

Komponentenschreiben

Die offizielle Methode zur Verwendung von Swiper ist in 4 Prozesse unterteilt:

1. Laden des Plugs -in

2. HTML-Inhalt

3. Größe für Swiper definieren

4. Swiper initialisieren

Ich folge auch diesem Prozess, um Komponenten zu schreiben:

Plug-in laden

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

HTML-Inhalt

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

Definieren Sie eine Größe für Swiper

.swiper-container {
  width: 600px;
  height: 300px;
}

Swiper initialisieren

Da Swiper erst initialisiert werden kann, wenn das Dom-Rendering abgeschlossen ist, Die Initialisierung muss in die Vue-Lebenszyklus-Hook-Funktion eingefügt werden. Medium:

mounted(): {
  /* eslint-disable no-new */
  new Swiper('.swiper-container', {})
}

/* eslint-disable no-new */ im obigen Code ist das Projekt, das die Eslint-Code-Erkennung ermöglicht und verwendet werden kann Wenn eslint nicht verwendet wird, verwenden Sie den folgenden Code:

mounted(): {
  var mySwiper = new Swiper('.swiper-container', {})
}

Complete

Kombinieren Sie die obigen Codes:

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

<script>
import Swiper from &amp;#39;swiper&amp;#39;;
import &amp;#39;swiper/dist/css/swiper.min.css&amp;#39;;
export default {
  mounted(): {
    var mySwiper = new Swiper(&#39;.swiper-container&#39;, {})
  }
}
</script>

Run, Sie können das Karussell sehen Wirkung erzielt werden kann. Bisher wurde jedoch nur der Karusselleffekt erzielt und die Daten wurden nicht gerendert.

Rendering von Daten

In tatsächlichen Projekten wird das Swiper-Plugin häufig verwendet, um den Effekt von Bannergrafiken zu erzielen (Sina-Mobilversion):

Erfassung von Daten

Ich verwende als Beispiel die in Vue-Projekten häufig verwendeten Ajax-Plug-In-Axios:

axios
 .get('/user?ID=12345')
 .then(function (response) {
  this.imgList = response;
 })
 .catch(function (error) {
  console.log(error);
 });

Die Datenstruktur zum Abrufen von Daten ist wie folgt angegeben:

[
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif"
]

Listenrendering

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide" v-for="item in imgList" :style="{backgroundImage: &#39;url(&#39; + item + &#39;)&#39;}"></p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

<style>
.swiper-slide {
  width: 100%;
  height: 400px;
}
<style>

Bisher ist das Datenrendering abgeschlossen, aber wenn man sich den tatsächlichen Effekt ansieht, scheint es, dass das Banner dies nicht erreichen kann die Wirkung des Karussells. Das Bild wird hier nur gerendert, aber das Karussellbild wird gerendert und wurde nicht initialisiert. Weil die Initialisierung abgeschlossen ist, wenn der Lebenszyklus gemountet wird.

Initialisierung

Nachdem die Daten abgerufen und das DOM aktualisiert wurden, muss Swiper neu initialisiert werden.

axios
 .get('/user?ID=12345')
 .then(function (response) {
  // 获取数据更新
  this.imgList = response;
  // DOM还没有更新
  this.$nextTick(() => {
    // DOM更新了
    // swiper重新初始化
    /* eslint-disable no-new */
    new Swiper('.swiper-container', {})
  })
 })
 .catch(function (error) {
  console.log(error);
 });

An diesem Punkt wird der Effekt des Karussellbildes realisiert.

Zusammenfassung

Swiper ist ein häufig verwendetes Plug-In, beim Importieren von Swiper in ein Vue-Projekt treten jedoch viele Probleme auf. Das Hauptproblem besteht darin, den Lebenszyklus von Vue zu verstehen, damit Sie verschiedene js-Plug-Ins effektiv nutzen können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden von Vue zur Implementierung der zugrunde liegenden Prinzipien (ausführliches Tutorial)

So ziehen Sie Steuerdateien in js und rufen sie ab Funktion zum Ziehen und Ablegen von Inhalten

Detaillierte Interpretation des dekorativen Designmusters in js

Das obige ist der detaillierte Inhalt vonWie importiere ich das Swiper-Plugin in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!