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 ...

随机推荐

sql server Delete误操作后如何恢复数据
声明:本文是根据别人的经验https://blog.csdn.net/dba_huangzj/article/details/8491327写的总结说明:update和delete时没有加where ...
python 3.x 学习笔记10 (析构函数and继承)
1.类变量的用途:大家公用的属性,节省开销(内存) 2.析构函数在实例释放和销毁的时候执行的,通常用于做一些收尾工作,如关闭一些数据库链接和打开的临时文件 3.私有方法两个下划线开头,声明该方法为私 ...
opengl问题
1.glCreateShader(GL_VERTEX_SHADER)失败原因: 在调用glewInit()初始化之后才能create shader;
解决vuex刷新页面数据丢失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
CentOS 7在grub rescue模式中修复系统
安装完CentOS 7后修改硬盘分区后,系统重启后,无法正常启动,进入grub rescue模式: 网上大多数centos grub rescue的资料应该是Centos 7之前的,其中提到的命令很 ...
javascript 继承之拷贝,原型,类式
// 拷贝继承,在子类内调用父类并修正this指向,再通过for in 拷贝父类的方法实现继承,具体实现如下代码 : function Tab(){//父类构造函数 this.name='aaa'; ...
【jQuery04】折叠树
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
带入gRPC：对 RPC 方法做自定义认证
带入gRPC:对 RPC 方法做自定义认证原文地址:带入gRPC:对 RPC 方法做自定义认证项目地址:https://github.com/EDDYCJY/go... 前言在前面的章节中,我们介 ...
WPF 列表自动换行
原文:WPF 列表自动换行本文告诉大家如何在 ListView 或 ListBox 使用 WrapPanel 让里面的控件自动换行在 WPF 可以通过修改 ItemsPanel 设置使用不同的 I ...
poj_2777线段树+位运算
第一次没想到用位运算,不出意料的T了,,, PS:在床上呆了接近两个月后,我胡汉三又杀回来刷题啦-- #include<iostream> #include<cstdio> # ...

基于vue的无缝滚动组件