So bedienen Sie den Swiper in Vue

Dieses Mal zeige ich Ihnen, wie Sie Swiper in Vue verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Swiper in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Einführung in Swiper

Swiper wird häufig für das Touch-Sliding von Inhalten auf mobilen Websites verwendet.

Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit JavaScript erstellt wurde und auf Mobiltelefone, Tablets und andere mobile Endgeräte abzielt.

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 bindet dann die Daten 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 Sie diese Methoden in mount() verwenden müssen. Dies ist ein Vue-Lebenszyklus-Hook Erst dann wird die Methode ausgelöst.

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:

Vue erzeugt einen Komponentenkarussell-Umschalteffekt

So verwenden Sie die Operatorüberladung

Das obige ist der detaillierte Inhalt vonSo bedienen Sie den Swiper in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!