基于vue的无缝滚动组件
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 //单步停止等待时间
}
}
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 ...
随机推荐
- SpringBoot学习笔记(8)-----SpringBoot文件上传
直接上代码,上传文件的前端页面: <body> <form action="/index/upload" enctype="multipart/form ...
- 关于VS2013 Browser Link 新功能
今天小明在编写MVC项目,设计前端项目的时候,突然遇到一个问题,就是无论什么页面,当每次执行调试的时候,页面中都会自动的加上这样一行代码: <!-- Visual Studio Browser ...
- 【mysql】新增、修改、删除、查询 语法讲义
一.DML - 数据操作语言 INSERT - 实现数据表数据的新增 UPDATE - 实现数据表数据的修改 DELETE - 实现数据表数据的删除 二.INSERT 语法: insert into ...
- 浅谈 MySQL的外键的作用
MySQL中外键的介绍: MySQL外键必须使用存储引擎为 innDB 其中MySAM 和MEMORYH这两种引擎不支持 由数据库自身保证数据一致性,完整性,更可靠,因为程序很难100%保证数据的 ...
- 比较排序算法（PHP）
冒泡排序 两两比较相邻记录的关键字,如果反序则交换,大的数字往下沉,一直到最大的出现在数组最后 function swap(&$x, &$y) { $temp = $x; $x = $ ...
- 紫书 例题 11-14 UVa 1279 （动点最小生成树）（详细解释）
这道题写了好久-- 在三维空间里面有动的点, 然后求有几次最小生成树. 其实很容易发现, 在最小生成树切换的时候,在这个时候一定有两条边相等, 而且等一下更大的那条边在最小生成树中,等一下更小的边不在 ...
- Java基础学习总结（8）——super关键字
一.super关键字 在JAVA类中使用super来引用父类的成分,用this来引用当前对象,如果一个类从另外一个类继承,我们new这个子类的实例对象的时候,这个子类对象里面会有一个父类对象.怎么去引 ...
- springMVC 配置jdbcTemplate连接Oracle数据库出错
springMVC 配置jdbcTemplate连接Oracle数据库出错 错误信息: log4j:WARN No appenders could be found for logger (org.s ...
- 杭电OJ(HDU)-ACMSteps-Chapter Two-《An Easy Task》《Buildings》《decimal system》《Vowel Counting》
http://acm.hdu.edu.cn/game/entry/problem/list.php?chapterid=1§ionid=2 1.2.5 #include<stdio.h> ...
- HDU 5303 Delicious Apples (2015多校第二场 贪心 + 枚举)
Delicious Apples Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Other ...