插件描述：vue滑動輪播圖插件，支持移動端拖拽滑動

vue-concise-slider,一個簡單的滑動組件,配置簡單,支持自適應/全屏+按鈕+分頁,同時兼容移動端和PC端

版本

v2.1.2 支持vue2.0+

目前已實現

- [x] 全屏自適應

- [x] 移動端兼容

- [x] 垂直滾動

- [x] 定時自動切換

- [x] 不定寬度滾動

- [x] 無縫循環滾動

- [x] 多級滾動

未來將實現

- [ ] 漸變滾動

- [ ] 視差效果

安裝npm?install?vue-concise-slider?--save

如何使用

import?slider?from?'vue-concise-slider'//?引入slider組件

export?default?{

el:?'#app',

data?()?{

return?{

//圖片列表[arr]

pages:[

{

title:?'',

style:{

background:'url(src/img/testimg-1.jpg)'

}

},

{

title:?'',

style:{

background:'url(src/img/testimg-2.jpg)'

}

},

{

title:?'slide3',

style:{

background:'#4bbfc3',

},

}

],

//滑動配置[obj]

sliderinit:?{

currentPage:?0,//當前頁碼

thresholdDistance:?500,//滑動判定距離

thresholdTime:?100,//滑動判定時間

autoplay:1000,//自動滾動[ms]

loop:true,//循環滾動

direction:'vertical',//方向設置，垂直滾動

infinite:1,//無限滾動前后遍歷數

slidesToScroll:1,//每次滑動項數

}

}

},

components:?{

slider

}

}

pages/初始化參數

OptionTypeDefaultDescription

titlestring-當前設置為每頁的標題，未來將直接輸出html

styleobj-直接作用在每個item上的style樣式，可以輸出背景圖，背景色，每項寬度可自定義，自動切換為不定寬滾動

sliderinit/初始化參數OptionTypeDefaultDescription

directionstring'horizontal'方向設置，默認為水平滾動('horizontal'),可設置為垂直滾動('vertical')

currentPagenumber-當前為第幾頁

thresholdDistancenumber-滑動距離閾值

thresholdTimenumber-滑動時間閾值

autoplaynumber[ms]-自動播放:時間[ms]

loopbooleanfalse循環滾動

infinitenumber1loop無縫滾動時,可以設置前后遍歷數

slidesToScrollnumber1每次滑動切換的頁數

API/父級傳遞的事件MethodParametersDescriptionExample

slideTonumber滑動到(number)頁childComponents.$emit('slideTo', num)

slideNext-滑動到下一頁childComponents.$emit('slideNext')

slideTo-滑動到上一頁childComponents.$emit('slidePre')

API/父級監聽的事件

MethodParametersDescriptionExample

slidenumber當前滑動到第(number)頁childComponents.$on('slide', function(pagenum){console.log(pagenum)})

總結

以上是生活随笔為你收集整理的vue纵向 轮播_vue滑动轮播图插件vueswiper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。