vue-seamless-scroll
A simple, Seamless scrolling for Vue.js
在awesome上一直沒有發現vue的無縫滾動組件,在工作之余寫了個組件,分享出來希望大家一起學習進步。
Demo
https://github.com/chenxuan0000/vue-seamless-scroll/index.html
Installation
NPM
```npm install vue-seamless-scroll --save ```Usage
ES6
以下es6用法需要webpack環境編譯.
具體參考 example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
new Vue({
components: {
vueSeamlessScroll
}
})
普通模式 (script tag)
Example:
具體參考 test/test.html```<html> <head> ... </head> <body> <div id="app"> <vue-seamless-scroll></vue-seamless-scroll> </div> <script src="vue.js"></script> <script src="vue-seamless-scroll"></script> <script> new Vue({ el: '#app' }) </script> </body> </html> ```
Configure
defaultOption () {
return {
step: 1, //步長 越大滾動速度越快
limitMoveNum: 5, //啟動無縫滾動最小數據量 this.dataList.length
hoverStop: true, //是否啟用鼠標hover控制
direction: 1, //1 往上 0 往下
openWatch: true, //開啟data實時監聽
singleHeight: 0, //單條數據高度有值hoverStop關閉
waitTime: 1000 //單步停止等待時間
}
}
TKS
vue-seamless-scroll發現bug或者有什么不足望指點,感覺不錯點個star吧。