Lösen Sie das Problem der Verwendung des Swiper-Plugins in Vue

Da ich dieses Plugin beim Schreiben einer Demo verwendet und auf einige Probleme gestoßen bin, habe ich einfach die Verwendung des Plugins und einige häufige Fehler überprüft.

1. Get .../maps/swiper.min.js.map 500 (Interner Serverfehler) erscheint

Bei Verwendung der Mindestversion fehlen Quellzuordnungsdateien

1. Deaktivieren Sie die Source Map-Eingabeaufforderung und löschen Sie die letzte Zeile der Datei swiper.min.js //# sourceMappingURL=swiper.min.js.map

2. Wenn Sie Source Map verwenden müssen, enthält das Gesamtpaket die Datei swiper.min.js.map. Legen Sie diese bitte am entsprechenden Speicherort ab. Über Source Map

2. Das Video kann nicht automatisch gedreht werden und die Seitenumbrüche werden nicht angezeigt.

Lösung:

install plus die Versionsnummer.

Aufgrund eines Versionsproblems im Plug-In-Paket „vue-awesome-swiper“ können die Klicks mit den Pfeilen nach links und rechts fehlschlagen.

Die Lösung lautet wie folgt:

npm deinstallierenvue-awesome-swiper --speichern

npm [email protected] --speichern

Nach der Installation von Version 3.1.3 starten Sie neu und überprüfen Sie, ob das Problem behoben ist

3. Fehler beim Rendern: „TypeError: Eigenschaft ‚params‘ von undefined kann nicht festgelegt werden“ wird angezeigt --- Dies hängt mit der Versionsnummer zusammen. Der erste Buchstabe von Version 4.0 ist groß geschrieben und der erste Buchstabe von Version 3.0 ist klein geschrieben.

Antwortlink: https://github.com/surmon-china/vue-awesome-swiper/issues/499

如果使用的是3.x版本[email protected] , lautet der Importcode wie folgt:

importiere { swiper, swiperSlide } von 'vue-awesome-swiper

如果使用的是4.x版本[email protected] , lautet der Importcode wie folgt:

importiere { Swiper, SwiperSlide } von 'vue-awesome-swiper

4. Nicht erfasster Referenzfehler: Swiper ist nicht definiert unter ...

Möglicherweise wurde die JS-Datei nicht geladen oder der Speicherort ist falsch.

Die Lösung lautet wie folgt:

Laden Sie das Dateipaket herunter und laden Sie die JS- und CSS-Dateien von Swiper auf die Seite, oder verwenden Sie den CDN-Dienst von Swiper, um die Dateien zu laden, und initialisieren Sie Swiper nach dem Laden.

Vue中使用Swiper的用法如下：

Der erste: globaler Import

In main.js

importiere VueAwesomeSwiper von „vue-awesome-swiper“;
 importiere "swiper/dist/css/swiper.css";
 
 Vue.use(VueAwesomeSwiper)

Die zweite Methode: lokale Einführung

In der js-Datei des verwendeten Moduls

importiere { swiper, swiperSlide } von „vue-awesome-swiper“;
importiere "swiper/dist/css/swiper.css";
 
Standard exportieren {
    
    Komponenten:
        Wischer,
        swiperSlide
    }
}

In der .vue-Datei werden die linken und rechten Pfeile außerhalb des Karussells platziert. Der Code lautet wie folgt:

<swiper Klasse="swiper" :Optionen="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="Element in 4" :key="Element">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div Klasse="swiper-pagination" Slot="pagination"></div>
</swiper>
 
 <div Klasse="swiper-button-prev" Slot="button-prev"></div>
 <div Klasse="swiper-button-next" Slot="button-next"></div>

In der .vue-Datei werden die linken und rechten Pfeile innerhalb des Karussells platziert. Der Code lautet wie folgt:

<swiper Klasse="swiper" :Optionen="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="Element in 4" :key="Element">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div Klasse="swiper-pagination" Slot="pagination"></div>
      <div Klasse="swiper-button-prev" Slot="button-prev"></div>
      <div Klasse="swiper-button-next" Slot="button-next"></div>
</swiper>

Die Konfigurationsinformationen von swiperOption oben lauten wie folgt. Einzelheiten finden Sie auf der offiziellen Website: https://www.swiper.com.cn/api/index.html

Dies ist das Ende dieses Artikels über das Fehlerproblem bei der Verwendung des Swiper-Plug-Ins in Vue. Weitere relevante Inhalte zur Verwendung des Swiper-Plug-Ins in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!