Was sind die Verwendungsmöglichkeiten von Swiper in Vue?

Dieses Mal erkläre ich Ihnen, wie Sie Swiper in Vue verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Swiper in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit Javascript erstellt wurde und auf Mobiltelefone, Tablets und andere mobile Endgeräte abzielt. In diesem Artikel wird hauptsächlich die Lösung für die Verwendung des Swiper-Plug-Ins in Vue und die Verwendung von Swiper in Vue vorgestellt. Freunde, die es benötigen, können sich auf

Swiper-Einführung

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 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 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 die Verwendung dieser Methoden in mount() ist ein Vue

Lebenszyklus Verstehen Sie es. 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 Die Daten

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

Der Coverflow ist zu diesem Zeitpunkt eine Karusselldiagramm-Umschaltmethode. Durch Ändern der Eigenschaften kann der Karussellmodus umgeschaltet 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:

Detaillierte Erläuterung der Verwendung von Mint-UI in Vue

Detaillierte Erläuterung der Verwendung des Webpack-Hot-Modul-Ersatzes

So wählen Sie die jQuery-Version aus

Das obige ist der detaillierte Inhalt vonWas sind die Verwendungsmöglichkeiten von Swiper in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!