基于vue的无缝滚动组件

最新推荐文章于 2024-08-07 11:32:45 发布

weixin_33701617

最新推荐文章于 2024-08-07 11:32:45 发布

阅读量417

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012459158

版权

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

weixin_33701617

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于vue的无缝滚动组件

vue-seamless-scrollA simple, Seamless scrolling for Vue.js在awesome上一直没有发现vue的无缝滚动组件，在工作之余写了个组件，分享出来希望大家一起学习进步。Demohttps://github.com/chenxuan0000/vue-seamless-scroll...
复制链接

扫一扫