Heim > Artikel > Web-Frontend > Verwendung des Vue-Karusselldiagramm-Plug-Ins Vue-Concise-Slider
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
Einfache Konfiguration
Leicht (~24kB gezippt)
Mehrere Schiebestile
Aktuell
Vollbildadaptiv
kompatibel mit Mobilgeräten
vertikales Scrollen
Geplante automatische Umschaltung
Scrollen mit variabler Breite
Nahtloses Schleifenscrollen
Multi -Ebenen-Scrolling
Gradienten-Scrolling
Rotierendes Scrollen
auf der Seite Benutzerdefinierte Komponenten hinzufügen
Zukünftig
Gradienten-Scrolling
Parallaxeffekt
Links
Dokumentation
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='slide' @tap='onTap' @init='onInit'> <!-- 设置loading,可自定义 --> <p slot="loading">loading...</p> </slider> </p> </template> <script> import slider from 'vue-concise-slider'// import slider components export default { el: '#app', data () { return { //Image list pages:[ { html: '<p class="slider1">slider1</p>', style: { 'background': '#1bbc9b' } }, { html: '<p class="slider2">slider2</p>', style: { 'background': '#4bbfc3' } }, { html: '<p class="slider3">slider3</p>', style: { 'background': '#7baabe' } } ], //Sliding configuration [obj] sliderinit: { currentPage: 0, thresholdDistance: 500, thresholdTime: 100, autoplay:1000, loop:true, direction:'vertical', infinite:1, slidesToScroll:1, timingFunction: 'ease', 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!