基于vue的无缝滚动组件

jerryloveemily 发布于2019-08-22 11:20 / 2706人阅读

摘要：在上一直没有发现的无缝滚动组件，在工作之余写了个组件，分享出来希望大家一起学习进步。

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

...

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

云服务器 GPU云服务器无缝滚动水平无缝滚动文字无缝滚动 javascript无缝滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92202.html

vue无缝滚动的插件开发填坑分享

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

岳光 2019-08-22 14:04 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

GHOST_349178 2019-08-30 13:47 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

Clect 2019-08-21 17:04 评论0 收藏0
vue-concise-slider vue滑动组件

摘要：中文一个简单的滑动组件配置简单支持自适应全屏按钮分页同时兼容移动端和端版本支持特点简单配置轻量多种滑动样式目前已实现全屏自适应移动端兼容垂直滚动定时自动切换不定宽度滚动无缝循环滚动多级滚动未来将实现渐变滚动视差效果链接文档安装中文 | English vue-concise-slider vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页...

Hwg 2019-08-21 14:18 评论0 收藏0
vue-concise-slider vue滑动组件

摘要：中文一个简单的滑动组件配置简单支持自适应全屏按钮分页同时兼容移动端和端版本支持特点简单配置轻量多种滑动样式目前已实现全屏自适应移动端兼容垂直滚动定时自动切换不定宽度滚动无缝循环滚动多级滚动未来将实现渐变滚动视差效果链接文档安装中文 | English vue-concise-slider vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页...

godlong_X 2019-08-01 15:37 评论0 收藏0