vue 滑動元件

vue-slider,乙個簡單的滑動元件,配置簡單,支援自適應/全屏+按鈕+分頁,同時相容移動端和pc端

支援vue2.0+

slider效果

完整文件

通過以下demo來實現

:sliderinit="sliderinit"
>
slider>
template>
import
slider
from
'./slider'
// 引入slider元件
export
default 
},},,}
],//滑動配置[obj]
sliderinit: }},
components: 
}script>

type

default

description

titlestring

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

styleobj

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

option

type

default

description

directionstring

'horizontal'

方向設定，預設為水平滾動('horizontal'),可設定為垂直滾動('vertical')

currentpagenumber

-當前為第幾頁

thresholddistancenumber

-滑動距離閾值

thresholdtimenumber

-滑動時間閾值

autoplaynumber[ms]

-loopboolean

false

迴圈滾動

method

parameters

description

example

slidetonumber

滑動到(number)頁

childcomponents.$emit('slideto', num)

slidenext-

childcomponents.$emit('slidenext')

slideto-

childcomponents.$emit('slidepre')

method

parameters

description

example

slidenumber

當前滑動到第(number)頁

childcomponents.$on('slide', function(pagenum))

歡迎來留下你的意見:

可以在這裡提交,會盡快處理:

Vue滑動翻頁元件swiper的實現 第一版

關於滑動翻頁，有很多優秀的外掛程式可以使用，但是多多少少都有點大，所以自己試著完成乙個元件來實現。以左右滑動翻頁為例 1 主要思路 最主要的就是對三個觸控事件的處理 touchstart touchmove touchend 在touchstart事件處理程式中記錄一些初始值，比如原始座標 在tou...

如何用vue製作乙個探探滑動元件

嗨，說起探探想必各位程式汪都不陌生 畢竟妹子很多 能在上面絲滑的翻牌子，探探的的堆疊滑動元件起到了關鍵的作用，下面就來看看如何用vue寫乙個探探的堆疊元件 簡單使用下探探會發現，堆疊滑動的功能很簡單，用一張圖概括就是 簡單歸納下裡面包含的基本功能點 體驗優化 有了歸納好的功能點，我們實現元件的思路會...

vue滑動進度條元件，可點選 可拖拽

錄屏有點邊框，請忽略 匯入 import cprogress from components c progress 使用 c progress percent 70 percentchange onpercentchange c progress percent 70 show slider tru...