Verwenden des Swiper-Plugins in Vue

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung des Swiper-Plug-Ins in Vue vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Einführung in Swiper

Swiper wird häufig zum Berühren und Verschieben von Inhalten auf mobilen Websites verwendet.

Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit Javascript für mobile Endgeräte wie Mobiltelefone und Tablets erstellt wurde.

Swiper kann gängige Effekte wie Touchscreen-Fokusbild, Touchscreen-Tab-Umschaltung, Touchscreen-Mehrbildumschaltung usw. erzielen.

Swiper ist Open Source, kostenlos, stabil, einfach zu bedienen und leistungsstark. Es ist eine wichtige Wahl für die Erstellung von Websites für mobile Endgeräte!

Um das Problem der Verwendung des Swiper-Plug-Ins in Vue zu lösen, wurde nach der Einführung des Swiper-Plug-Ins festgestellt, dass es nicht normal ausgeführt werden konnte

Dieses Mal haben wir das Entfernen der Daten simuliert aus dem Hintergrund und dann Datenbindung im Swiper-Tag.

<template> 
 <p class="homePage"> 
  <abc></abc> 
  <p id="banner"> 
   <p class="swiper-container"> 
     <p class="swiper-wrapper"> 
     <p class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></p> 
     </p> 
     <p class="swiper-pagination"></p> 
   </p> 
  </p> 
 </p> 
</template> 
<script> 
import Swiper from "../../static/js/swiper-3.4.0.min.js"; 
import header from 'components/header.vue'; 
export default { 
 components : { 
  abc : header 
 }, 
 data(){ 
 return { 
  swiper:"" 
 } 
 }, 
 mounted(){ 
 this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
   this.swiper=res.data.data.slide; 
   var mySwiper = new Swiper('.swiper-container', { 
   autoplay: 2000,//可选选项，自动滑动 
    //分页器 
   pagination : '.swiper-pagination', 
   paginationClickable :true, 
   observer: true 
   }) 
  }) 
 } 
 
} 
</script> 
<style type="text/css"> 
 @import "../../static/css/home.css"; 
 @import "../../static/css/swiper-3.4.0.min.css"; 
</style>

Der entscheidende Punkt ist, dass die Verwendung von mount() ein Vue-Lebenszyklus-Hook ist as when Diese Methode wird erst ausgelöst, nachdem die Instanz im DOM gemountet wurde.

Werfen wir einen Blick auf die Verwendung von Swiper in Vue

Laden Sie zunächst das Plug-In in Vue über npm i vue-awesome-swiper --save

herunter

Führen Sie dann

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

in main.js ein, fügen Sie dann den Code

<p class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p>
</swiper>
<p class="jc"></p>
</p>

in die Struktur der Komponenten ein, die Sie verwenden müssen, und definieren Sie dann das Karussellbild in Daten

swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
　　rotate: 30,
　　stretch: 10,
　　depth: 60,
　　modifier: 2,
　　slideShadows : true
　　}
},

Derzeit ist Coverflow eine Möglichkeit, das Karusselldiagramm zu ändern. Durch Ändern der Eigenschaften kann der Karussellmodus geändert werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AngularFünf-Schritte-Anleitung zum Hinzufügen von Stilklassen zu Komponenten-Tags

Vue macht den internen Komponentenkarussellwechsel detailliert Erklärung der Schritte

Das obige ist der detaillierte Inhalt vonVerwenden des Swiper-Plugins in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!