本篇文章主要给大家讲解了vue的无缝滚动组件vue-seamless-scroll的用法，需要的朋友参考学习下吧。
Installation
NPM
npm install vue-seamless-scroll --save
Usage
立即学习“前端免费学习笔记（深入）”；
ES6
以下es6用法需要webpack环境编译.
无缝滚动demo
demo1 向上无缝滚动,hover可停止
var option = {
step: 0.5,
limitMoveNum: 5
}
demo2 limitMoveNum过大不滚动 开启了openWatch
3s后data增加到9条
var option = {
limitMoveNum: 7
}
demo3 limitMoveNum过大不滚动 关闭了openWatch
3s后data增加到9条
var option = {
limitMoveNum: 7
openWatch: false
}
demo4 向下滚动,禁止了hover悬停
var option = {
云模块网站管理系统3.1.03下载云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
limitMoveNum: 5,
direction: 0,
hoverStop: false,
}
demo5 向上无缝滚动,单条停止一段时间
var option = {
step: 0.5,
limitMoveNum: 5
singleHeight: 30,
waitTime: 1000
}
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
new Vue({
components: {
vueSeamlessScroll
}
})普通模式 (script tag)
Example:
Document
-
...
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 //单步停止等待时间
}
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
