Heim  >  Artikel  >  Web-Frontend  >  Verwendung des Vue-Karusselldiagramm-Plug-Ins Vue-Concise-Slider

Verwendung des Vue-Karusselldiagramm-Plug-Ins Vue-Concise-Slider

亚连
亚连Original
2018-05-30 17:14:384135Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung des Vue-Karussell-Diagramm-Plug-Ins Vue-Concise-Slider vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

vue-concise-slider

vue-concise-slider, eine einfache Schiebekomponente mit einfacher Konfiguration, unterstützt Adaptiv/Vollbild + Schaltfläche + Paging und ist kompatibel mit Mobil- und PC-Version

Version

v2.4.7 unterstützt vue2.0+

Funktionen

  1. Einfache Konfiguration

  2. Leicht (~24kB gezippt)

  3. Mehrere Schiebestile

Aktuell

  1. Vollbildadaptiv

  2. kompatibel mit Mobilgeräten

  3. vertikales Scrollen

  4. Geplante automatische Umschaltung

  5. Scrollen mit variabler Breite

  6. Nahtloses Schleifenscrollen

  7. Multi -Ebenen-Scrolling

  8. Gradienten-Scrolling

  9. Rotierendes Scrollen

  10. auf der Seite Benutzerdefinierte Komponenten hinzufügen

Zukünftig

  1. Gradienten-Scrolling

  2. Parallaxeffekt

Links

  1. Dokumentation

  2. Demo

Installation

npm install vue-concise-slider --save

Wie man es benutzt

<template>
<!-- 制作一个框架包裹slider -->
 <p style="width:70%;margin:20px auto;height:400px">
   <!-- 配置slider组件 -->
   <slider :pages="pages" :sliderinit="sliderinit" @slide=&#39;slide&#39; @tap=&#39;onTap&#39; @init=&#39;onInit&#39;>
     <!-- 设置loading,可自定义 -->
     <p slot="loading">loading...</p>
   </slider>
 </p>
</template>
<script>
import slider from &#39;vue-concise-slider&#39;// import slider components
export default {
  el: &#39;#app&#39;,
  data () {
   return {
    //Image list
    pages:[
     {
     html: &#39;<p class="slider1">slider1</p>&#39;,
     style: {
      &#39;background&#39;: &#39;#1bbc9b&#39;
      }
     },
     {
      html: &#39;<p class="slider2">slider2</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#4bbfc3&#39;
      }
     },
     {
      html: &#39;<p class="slider3">slider3</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#7baabe&#39;
      }
     }
    ],
    //Sliding configuration [obj]
    sliderinit: {
     currentPage: 0,
     thresholdDistance: 500,
     thresholdTime: 100,
     autoplay:1000,
     loop:true,
     direction:&#39;vertical&#39;,
     infinite:1,
     slidesToScroll:1,
     timingFunction: &#39;ease&#39;,
     duration: 300
    }
   }
  },
  components: {
    slider
  },
  methods: {
   // Listener event
   slide (data) {
    console.log(data)
   },
   onTap (data) {
    console.log(data)
   },
   onInit (data) {
    console.log(data)
   }
  }
}
</script>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Eine kurze Diskussion über die Anwendungsszenarien der integrierten Komponentenkomponenten von Vue

Ein einfaches Tutorial zur Verwendung von weniger in vue2

Konfigurationsdatei unter vue-cli scaffolding-bulid

Das obige ist der detaillierte Inhalt vonVerwendung des Vue-Karusselldiagramm-Plug-Ins Vue-Concise-Slider. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn