Heim > Artikel > Web-Frontend > 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
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!