Utiliser le plugin swiper dans vue

Cette fois je vais vous apporter les précautions pour utiliser le plug-in swiper dans vue Ce qui suit est un cas pratique, jetons un coup d'œil.

Introduction à Swiper

Swiper est souvent utilisé pour toucher et faire glisser du contenu sur des sites Web mobiles.

Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec javascript pour les terminaux mobiles tels que les téléphones mobiles et les tablettes.

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 depuis l'arrière-plan, puis liaison de 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() est un hook vuelife. comprenez-le. Cette méthode ne sera déclenchée qu’après le montage de l’instance sur le DOM.

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 :

Instructions en 5 étapes angulaires pour ajouter des classes de style aux balises de composants

Vue effectue la commutation du carrousel de composants internes détaillée explication des étapes

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!