Tipps zur Verwendung des Swiper-Plug-Ins in Vue

Dieses Mal bringe ich Ihnen die Tipps zur Verwendung des Swiper-Plug-Ins in Vue. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Swiper-Plug-Ins in Vue? sehen.

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 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 die Verwendung von mount(). Sie müssen diese Methoden in einem Vue-Lebenszyklus-Hook verwenden 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 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 derzeit 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 Einführung in die Express-Standardprotokollkomponente Morgan

Webpacks Hot-Modul-Ersatz HMR/Hot-Update spezifische Schritte

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