Comment utiliser le plug-in swiper carrousel dans vue pour implémenter des images de carrousel (analyse de code)

Le contenu de cet article explique comment utiliser le plug-in swiper carrousel dans Vue pour réaliser le graphique carrousel (analyse de code). J'espère que ce sera le cas. utile pour vous.

Parfois, nous devons utiliser des composants de carrousel dans vue. Si des composants tiers sont introduits dans les composants de vue, il est préférable de les installer via npm pour une gestion unifiée des packages d'installation.

Déclaration : Cet article utilise la version vue.2x.

Installez le plug-in via npm :

 npm install swiper --save-dev

Introduisez swiper dans le composant qui doit utiliser swiper, et l'initialisation du swiper est en monté

Code source de Slider.vue :

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
      <div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!--<div class="swiper-button-prev"></div>-->
    <!--<div class="swiper-button-next"></div>-->
    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
  </div>
</template>
<script>
  import &#39;swiper/dist/css/swiper.css&#39;
  import Swiper from &#39;swiper&#39;;
  export default {
    name: "Slider",
    mounted(){
      new Swiper (&#39;.swiper-container&#39;, {
        loop: true,
        // 如果需要分页器
        pagination: &#39;.swiper-pagination&#39;,
        // 如果需要前进后退按钮
        nextButton: &#39;.swiper-button-next&#39;,
        prevButton: &#39;.swiper-button-prev&#39;,
        // 如果需要滚动条
        scrollbar: &#39;.swiper-scrollbar&#39;,
      })
    }
    }
</script>

<style scoped>
  .swiper-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .swiper-wrapper {
    height: 200px;
  }

  .swiper-slide img {
    max-width: 100%;
  }

  .swiper-slide {
    text-align: center;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

Effet de course :

Ensuite, nous refactorisons le code ci-dessus, car si nous utilisons le sélecteur CSS comme base pour Swiper pour positionner les éléments sur la page, s'il y a deux conteneurs .slider sur une page à en même temps, alors ce composant Cela provoquera le chaos ! Nous devons adhérer à une approche de développement à faible couplage pour refactoriser notre code.

Nous pouvons utiliser la méthode de spécification plus précise fournie par Vue pour ajouter une familiarité de référence à l'élément, puis y faire référence via le nom de référence this.$refs dans le code.

C'est le numéro après Vue.js2.0. La balise ref est un attribut HTML standard. Elle remplace l'écriture de v-ref dans Vue.js 1.x

.

Il est à noter que si vous passez à la liaison dynamique des images, veuillez vous référer à : Solution au problème de chemin des images statiques locales dans vue-cil et webpack

J'ai transféré les fichiers de ressources statiques vers le répertoire statique.

Le code refactorisé est le suivant :

<template>
  <div>
  <div class="swiper-container" ref="slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="slide in slides">
        <router-link :to="{name:&#39;BookDetail&#39;,params:{id:slide.id}}">
        <img :src="slide.img_url"/>
        </router-link>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import &#39;swiper/dist/css/swiper.css&#39;
  import Swiper from &#39;swiper&#39;
  export default {
    name: "Slider",
    data(){
      return{
        slides:[{id:1,img_url:&#39;./static/sliders/t1.svg&#39;},{id:2,img_url:&#39;./static/sliders/t2.svg&#39;}]
      }
    },
    mounted(){
      new Swiper (this.$refs.slider, {
        loop: true,
        // 如果需要分页器
        pagination: &#39;.swiper-pagination&#39;,
        // 如果需要前进后退按钮
        nextButton: &#39;.swiper-button-next&#39;,
        prevButton: &#39;.swiper-button-prev&#39;,
        // 如果需要滚动条
        scrollbar: &#39;.swiper-scrollbar&#39;,
      })
    }
    }
</script>

Les composants ne sont pas complètement indépendants ici. Il y a des définitions de données à l'intérieur. , ils peuvent être Ces données sont transmises en tant que paramètre, c'est-à-dire que les données sont transmises entre les composants.

La page Vue saute et transmet les paramètres

Transmettez les paramètres via le routage, définissez l'itinéraire dans router/index.js

export default new Router({
  routes: [
    {
      name:'BookDetail',
      path:'/books/:id',
      component: BookDetail
    }
  ]
})

Les paramètres de routage qui doivent être transmis ont été définis dans le composant carrousel précédent

 <router-link :to="{name:&#39;BookDetail&#39;,params:{id:slide.id}}">
        <img :src="slide.img_url"/>
        </router-link>

Interface de réception des paramètres BookDetail.vue

<template><p>
  点击的是：<span v-text="id"></span></p></template><script>
    export default {
      name: "BookDetail",
      data(){        return{
          id:this.$route.params.id
        }
      },
      props:[]
    }</script><style scoped></style>

S'il y a trop de paramètres passés, cette méthode n'est vraiment pas pratique, alors vous pouvez utiliser le transfert de données vuex ou composant.

Pour plus d'informations sur le transfert de valeur des composants, veuillez vous référer à : Transfert de valeur entre les composants Vue

À propos de l'emballage de l'environnement de production Vue-cli npm run build, le problème ne peut pas être ouvert localement

À chaque fois après avoir exécuté :hs, c'est suffisant.

Recommandations associées :

Exemple d'utilisation du plug-in de carrousel adaptatif JQuery Swiper

Utiliser le composant swiper pour implémenter des publicités carrousel Effet

Vue encapsule Swiper pour partager le code de l'effet carrousel d'images

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!