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环境编译.
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 //单步停止等待时间
}
}
demo gif
demo1.gif
demo2.gif
demo3.gif
demo4.gif
TKS
vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。
