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吧。

原文地址：https://segmentfault.com/a/1190000012459158

基于vue的无缝滚动组件的更多相关文章

vue实现无缝滚动
vue实现无缝滚动标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...
vue 自定义marquee无缝滚动组件
先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...
一款基于Vue的扩展性组件库 VV-UI
github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...
Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
GearCase UI - 自己构建一套基于 Vue 的简易开源组件库
最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...
基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
Vue 消息无缝滚动
vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...
基于Vue搭建自己的组件库（1）
本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...
基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

随机推荐

Mac 如何修改Mac系统的默认截图路径
step 1 :打在桌面或者其他任意位置创建一个文件夹:截图图库.我创建的路径是:/Users/yilin/Documents/截图图库(仅供参考) step 2:打开终端,输入以下命令:defaul ...
路飞学城-Python开发-第一章
# 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...
NOIp2018模拟赛三十二
继续挂成傻逼成绩:100+0+10(90)=110 A全场一眼题,C没取模挂八十分,然后没特判特殊情况又挂十分 A:[agc009b]tournament(太简单,咕了) B:[ATC2142]Bu ...
Linux ping 不通域名添加DNS
修改路由配置文件 vi /etc/resolv.conf # Generated by NetworkManager #NDS nameserver 192.168.32.2 redhat7 系统优化 ...
mycat读写分离+垂直切分+水平切分+er分片+全局表测试
原文http://blog.163.com/bigoceanwu@126/blog/static/172718064201683031639683/ 读写分离:利用最基础的mysql主从复制,事务性的 ...
maven跳过单元测试-maven.test.skip和skipTests的区别以及部分常用命令
-DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下. -Dmaven.test.skip=true,不执行测试用例,也不编译测试 ...
COGS——T 826. [Tyvj Feb11] GF打dota
http://www.cogs.pro/cogs/problem/problem.php?pid=826 ★★☆ 输入文件:dota.in 输出文件:dota.out 简单对比时间限制:1 ...
[MST] Defining Asynchronous Processes Using Flow
In real life scenarios, many operations on our data are asynchronous. For example, because additiona ...
MongoDB count distinct group by JavaAPI查询
import java.net.UnknownHostException; import com.mongodb.BasicDBList; import com.mongodb.BasicDBObje ...
log_archive_min_succeed_dest
博客上.看了一大神的文章:http://blog.csdn.net/msdnchina/article/details/45141427 我表示有疑问:归档日志路径爆满,那么对于开启归档模式的数据库, ...

基于vue的无缝滚动组件