Quelles sont les utilisations de swiper in vue ?

Cette fois, je vais vous expliquer comment utiliser swiper in vue, et quelles sont les précautions lors de l'utilisation de swiper in vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. Cet article présente principalement la solution à l'utilisation du plug-in swiper dans vue et à l'utilisation de swiper dans vue. Les amis qui en ont besoin peuvent se référer à

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, ciblant 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 vue

life. 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 :

Explication détaillée de l'utilisation de mint-ui dans vue

Explication détaillée de l'utilisation du remplacement du module chaud du webpack

Comment choisir la version jQuery

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!