這篇文章主要介紹了vue輪播圖插件vue-concise-slider的使用,現在分享給大家,也給大家做個參考。
vue-concise-slider
vue-concise-slider,一個簡單的滑動組件,配置簡單,支援自適應/全螢幕按鈕分頁,同時相容於行動端和PC端
版本
v2.4.7 支援vue2.0
特點
簡單配置
輕量(~24kB gzipped)
#多種滑動樣式
npm install vue-concise-slider --save
<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>
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
淺談Vue內建component元件的應用程式場景vue2中使用less簡易教學#vue-cli腳手架-bulid下的設定檔以上是vue輪播圖外掛程式vue-concise-slider的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!