So verwenden Sie das Swiper-Karussell-Plug-In in Vue, um Karussellbilder zu implementieren (Codeanalyse)

Der Inhalt dieses Artikels befasst sich mit der Verwendung des Swiper-Karussell-Plug-Ins zur Realisierung des Karussell-Diagramms (Code-Analyse). Ich hoffe, dass dies der Fall ist nützlich für Sie.

Manchmal müssen wir Karussellkomponenten in Vue verwenden. Wenn Komponenten von Drittanbietern in Vue-Komponenten eingeführt werden, ist es für eine einheitliche Installationspaketverwaltung am besten, sie über npm zu installieren.

Erklärung: Dieser Artikel verwendet die vue.2x-Version.

Installieren Sie das Plug-in über npm:

 npm install swiper --save-dev

Führen Sie Swiper in die Komponente ein, die Swiper verwenden muss, und setzen Sie es ein Initialisierung des Swipers im gemounteten

Slider.vue-Quellcode:

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

Laufeffekt:

Als nächstes überarbeiten wir den obigen Code, denn wenn wir CSS-Selektoren als Grundlage für Swiper verwenden, um Elemente auf der Seite zu positionieren, wenn es zwei .slider-Container gleichzeitig auf einer Seite gibt, dann wird diese Komponente durcheinander gebracht! Wir müssen uns an einen Entwicklungsansatz mit geringer Kopplung halten, um unseren Code umzugestalten.

Wir können die von Vue bereitgestellte präzisere Spezifikationsmethode verwenden, um dem Element Ref-Vertrautheit hinzuzufügen und dann über den Referenznamen this.$refs im Code darauf zu verweisen.

Dies ist die Zahl nach Vue.js2.0. Das ref-Tag ist ein Standard-HTML-Attribut. Es ersetzt die Schreibweise von v-ref in Vue.js 1.x

Es ist zu beachten, dass Sie beim Wechsel zur dynamischen Bindung von Bildern bitte auf Folgendes verweisen: Lösung des Pfadproblems lokaler statischer Bilder in vue-cil und webpack

Ich habe die statischen Ressourcendateien nach übertragen das statische Verzeichnis.

Der umgestaltete Code lautet wie folgt:

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

Die Komponenten sind hier tatsächlich nicht vollständig unabhängig Daten können als Parameter übergeben werden, d. h. Daten werden zwischen Komponenten übergeben.

Vue-Seite springt und übergibt Parameter

Parameter durch Routing übergeben, Route in router/index.js definieren

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

Die Routing-Parameter, die übergeben werden müssen, wurden in der vorherigen Karussellkomponente definiert

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

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

Wenn zu viele Parameter übergeben werden, ist diese Methode definitiv unpraktisch. Dann können Sie Vuex oder die Komponentendatenübertragung verwenden.

Informationen zur Komponentenwertübertragung finden Sie unter: Wertübertragung zwischen Vue-Komponenten

Beim Vue-cli npm run build Produktionsumgebungspaket kann das Problem nicht lokal geöffnet werden

Jedes Mal nach dem Ausführen von :hs ist genug.

Verwandte Empfehlungen:

Beispiel für die Verwendung des adaptiven JQuery-Karussell-Plug-ins Swiper

Verwendung der Swiper-Komponente zur Implementierung von Karussellanzeigen Effekt

Vue kapselt Swiper, um den Code für den Bildkarusselleffekt zu teilen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Swiper-Karussell-Plug-In in Vue, um Karussellbilder zu implementieren (Codeanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!