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
<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.lengthhoverStop: true, //是否启用鼠标hover控制direction: 1, //1 往上 0 往下openWatch: true, //开启data实时监听singleHeight: 0, //单条数据高度有值hoverStop关闭waitTime: 1000 //单步停止等待时间}}
TKS
vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。
原文地址:https://segmentfault.com/a/1190000012459158
更多专业前端知识,请上 【猿2048】www.mk2048.com