Comment faire fonctionner le swiper en vue

Cette fois, je vais vous montrer comment utiliser swiper in vue, et quelles sont les précautions à prendre pour utiliser swiper in vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Introduction à Swiper

Swiper est souvent utilisé pour le glissement tactile de contenu sur des sites Web mobiles.

Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec JavaScript, ciblant les téléphones mobiles, tablettes et autres terminaux mobiles.

Swiper peut obtenir des effets courants tels que l'image de mise au point de l'écran tactile, la commutation d'onglets sur l'écran tactile, la commutation multi-images sur l'écran tactile, etc.

Swiper est open source, gratuit, stable, facile à utiliser et puissant. C'est un choix important pour créer des sites Web sur terminaux mobiles !

Pour résoudre le problème de l'utilisation du plug-in swiper dans vue, après avoir introduit le plug-in swiper, il a été constaté qu'il ne pouvait pas fonctionner normalement

Cette fois, nous avons simulé la suppression des données à partir de l'arrière-plan, puis lié les données dans la balise swiper.

<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>

Le point clé est l'utilisation de Mounted(). Vous devez utiliser ces méthodes dans Mounted(). Il s'agit d'un hook de cycle de vie de vue. Vous pouvez également le comprendre comme étant monté. l'instance arrive. La méthode ne sera déclenchée qu'une fois le DOM terminé.

Jetons un coup d'œil à l'utilisation de swiper dans vue

Téléchargez d'abord le plug-in dans vue via npm i vue-awesome-swiper --save

Introduisez ensuite

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

dans main.js, puis insérez le 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>

dans la structure des composants que vous devez utiliser, puis définissez l'image du carrousel dans les données

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

Le coverflow à ce moment est une méthode de changement de graphique carrousel. La modification des propriétés peut changer le mode carrousel.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Vue crée un effet de commutation de carrousel de composants

Comment utiliser la surcharge d'opérateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!