Vue Table无缝滚动

Ganhua

2020 年 10 月 15 日

3130 次浏览

暂无评论

1388字数

Vue

## 功能介绍 ##

实现Vue的无缝连接滚动，详细效果请移步[codepen](https://codepen.io/ganboy-blog/pen/MWeKaGz)

官方演示移步[官方演示](https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default)

![效果演示,效果演示](https://i.loli.net/2020/10/14/fX41q6zyITKuZd8.gif)

该效果使用 [vue-seamless-scroll](https://github.com/chenxuan0000/vue-seamless-scroll)

## 功能特性 ##

* [x] 基于requestAnimationFrame实现
* [x] 配置多满足多样需求
* [x] 目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

## 安装 ##

## NPM ##

```bash
npm install vue-seamless-scroll --save
```

### CDN ##

`https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js`

## 配置项

| key | description | default | val |
|:---|---|---|---|
|step|数值越大速度滚动越快|1|Number|
|limitMoveNum|开启无缝滚动的数据量|5|Number|
|hoverStop|是否启用鼠标hover控制|true|Boolean|
|direction|方向 0 往下 1 往上 2向左 3向右|1|Number|
|openTouch|移动端开启touch滑动|true|Boolean|
|singleHeight|单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1|0|Number|
|singleWidth|单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3|0|Number|
|waitTime|单步停止等待时间(默认值1000ms)|1000|Number|
|switchOffset|左右切换按钮距离左右边界的边距(px)|30|Number|
|autoPlay|1.1.17版本前手动切换时候需要置为false|true|Boolean|
|switchSingleStep|手动单步切换step值(px)|134|Number|
|switchDelay|单步切换的动画时间(ms)|400|Number|
|switchDisabledClass|不可以点击状态的switch按钮父元素的类名|disabled|String|
|isSingleRemUnit|singleHeight and singleWidth是否开启rem度量|false|Boolean|

最后修改：2020 年 12 月 08 日