基于vue的无缝滚动组件
Browser support(mobile.pc)
支持移动端touch事件滚动循环列表
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 //单步停止等待时间 } }
License
vue-simple-spinner is open source and released under the MIT License.
相关推荐
-
Glob Patterns匹配模式使用 框架
2019-1-2
-
服务端预渲染之Nuxt(使用篇) 框架
2019-4-15
-
Angular CDK Overlay 弹出覆盖物 框架
2019-7-4
-
一文读懂JSONP原理 框架
2019-5-11
-
理解virtual dom的实现细节-snabbdom 框架
2019-1-1
-
Node.js Color 模块实现入门浅析 框架
2019-3-6
-
React Native基础&入门教程:以一个To Do List小例子,看props和state 框架
2019-4-3
-
深入理解Node.js 进程与线程(8000长文彻底搞懂) 框架
2019-8-16
-
vue 页面跳转传参 框架
2019-9-17
-
解决 Electron 项目在 OSX 复制和粘贴快捷键失效的问题 框架
2019-8-9