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的无缝滚动组件的更多相关文章

  1. vue实现无缝滚动

    vue实现无缝滚动 标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...

  2. vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...

  3. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  4. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  5. GearCase UI - 自己构建一套基于 Vue 的简易开源组件库

    最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...

  6. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  7. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  8. 基于Vue搭建自己的组件库（1）

    本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...

  9. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

随机推荐

  1. application和javaBean练习

    编写一个jsp程序,实现将用户信息保存在application对象的用户注册 package com.sp.test; public class User { private String usena ...

  2. Codeforces 987A. Infinity Gauntlet（手速题，map存一下输出即可）

    解法: 1.先将对应的字符串存入map. 2.然后将输入的串的second置为空. 3.输出6-n,输出map中的非空串. 代码: #include <bits/stdc++.h> usi ...

  3. 6、DRN-----深度强化学习在新闻推荐上的应用

    1.摘要: 提出了一种新的深度强化学习框架的新闻推荐.由于新闻特征和用户喜好的动态特性,在线个性化新闻推荐是一个极具挑战性的问题. 虽然已经提出了一些在线推荐模型来解决新闻推荐的动态特性,但是这些方法 ...

  4. 由Request Method:OPTIONS初窥CORS（转）

    刚接触前端的时候,以为HTTP的Request Method只有GET与POST两种,后来才了解到,原来还有HEAD.PUT.DELETE.OPTIONS…… 目前的工作中,HEAD.PUT.DELE ...

  5. BZOJ 3529 [Sdoi2014]数表 (莫比乌斯反演+树状数组+离线)

    题目大意:有一张$n*m$的数表,第$i$行第$j$列的数是同时能整除$i,j$的所有数之和,求数表内所有不大于A的数之和 先是看错题了...接着看对题了发现不会做了...刚了大半个下午无果 看了Po ...

  6. 实战medusa暴力破解

     medusa介绍: 暴力破解工具:主要可以破解这些模块功能很强大 medusa  的安装 条件: 准备工作:(下载下面软件)   1 wget http://www.foofus.net/jmk/t ...

  7. The Zen of Python, by Tim Peters

    Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Comp ...

  8. 紫书 例题8-7 UVa 11572（滑动窗口）

    滑动窗口这个方法名字非常形象, 先是窗口的右指针尽量往右滑, 滑不动了就滑窗口的左指针, 滑到右指针又可以开始滑动为止. 这道题是要记录滑的过程中最大的窗口长度, 限制条件是窗口中不能出现重复的值. ...

  9. 利用hive源码解析sql查了哪些表哪些字段

    在hiveserver2中使用了org.apache.hadoop.hive.ql.parse.BaseSemanticAnalyzer对抽象语法树(AST)进行语义分析,分析的过程可以得出hive查 ...

  10. C++primer书店程序

    #include <iostream> #include <string> #include <cassert> #include <algorithm> ...