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

&lt;head&gt;...
&lt;/head&gt;
&lt;body&gt;&lt;div id="app"&gt;&lt;vue-seamless-scroll&gt;&lt;/vue-seamless-scroll&gt;&lt;/div&gt;&lt;script src="vue.js"&gt;&lt;/script&gt;&lt;script src="vue-seamless-scroll"&gt;&lt;/script&gt;&lt;script&gt;new Vue({el: '#app'})&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Configure

defaultOption () {return {step: 1, //步长 越大滚动速度越快limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.lengthhoverStop: 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

更多专业前端知识，请上【猿2048】www.mk2048.com

基于vue的无缝滚动组件相关推荐

vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
vue 自定义marquee无缝滚动组件
今天介绍一下,上下,左右无缝滚动的公告栏信息组件的开发. 首先上效果: 看起来有点卡顿,实际上还是挺顺畅的... 代码: 左右滚动的组件:marqueeX <template><di ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
Element 2.13.0 发布，基于 Vue 的桌面端组件库
Element 2.13.0 发布了.Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型.由饿了么公司前端团队开源. ...
说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...

基于vue的无缝滚动组件