# vue-gapless-scroll

> 适用于vue2的(无缝滚动,图片轮播)组件

Latest version **1.0.5** (published 2021-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-gapless-scroll
pnpm add vue-gapless-scroll
yarn add vue-gapless-scroll
bun add vue-gapless-scroll
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-12-28 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 164.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Min |
| Maintainers | 4xian |
| Keywords | vue, vue2, vue.js, components, seamless, scroll |

## Links

- npm: https://www.npmjs.com/package/vue-gapless-scroll
- Repository: https://github.com/4xian/MinUI
- Homepage: https://github.com/4xian/MinUI#readme
- Issues: https://github.com/4xian/MinUI/issues
- npm.io page: https://npm.io/package/vue-gapless-scroll

## Recent versions

- 1.0.5 (latest) — 2021-12-28
- 1.0.4 — 2021-12-28
- 1.0.3 — 2021-12-28
- 1.0.2 — 2021-12-28
- 1.0.1 — 2021-12-28
- 1.0.0 — 2021-12-27

## README

# 1. 适用于vue2的(无缝滚动,文字·图片轮播)组件
`
可用于数组的列表滚动,也可用于图片轮播，亦或随意一段文字的滚动
`

# 2. Install:
`
yarn add vue-gapless-scroll;
(npm install vue-gapless-scroll)
`

# 3. Use:
```
import VueGaplessScroll from 'vue-gapless-scroll';
Vue.use(VueGaplessScroll)
```

# 4. Settings:
```
interface GaplessScrollOptions {
  // 0:无缝滚动(用于无点击事件) 1: 触底滚动(到达最后一个会返回顶部，用于点击事件滚动) (default:0)
  scrollType: number;

  // 滚动方向 up:向上滚动 down:向下 left:向左 right:向右 (default: 'up')
  direction: "up" | "down" | "left" | "right";

  // 滚动速度 数字越大越快 (default:1)
  speed: number;

  // 符合滚动条件后是否自动滚动 (default:true)
  autoPlay: boolean;

  // 鼠标悬停是否停止滚动 (default:true)
  hoverStop: boolean;

  // 单次滚动(轮播)距离(仅在interval不为0生效) (default:0)
  step: number;

  // 轮播停留间隔 0为自动滚动 (default:0)
  interval: number;

  // 带间隔的轮播(interval不为0)是否显示(左右/上下)控制器 (default:false)
  controls: boolean;

  // 自定义控制器时，两边控制器宽(左右滚动时)或高(上下滚动时)总和 (default:[0,0])
  // 即为外层容器width/height需补充的padding
  controlsPadding: number[]; 

  // 单次轮播动画时间(仅在点击(左右/上下)控制器时生效,0无动画) (default:0)
  animateTime: number;

  // 无内容时显示的图src (default:"")
  emptyImg: string;

  // 无内容时显示的文字 (default:"暂无数据")
  emptyText: string;

  // 无数据时图片显示大小 (default:"30%")
  emptyWidth: string;
  
  //  解决水平无缝时margin间隔问题 (default:0)
  marginBias: number;
}

props: {
  // 外容器宽度 (default:100)
  width: number;
  
  // 外容器高度 (default:200)
  height: number;

  // 数据(必须) (default:[])
  list: any[];

  // 配置选项 (default:{})
  options: Partial<GaplessScrollOptions>;
}

```

# 5. Examples:
```
    tip: ***list数组是必须的***

    1. 【上下】滚动时(direction: 'up' | 'down'): 
        -span的高度为40px, 超过5条即滚动 则height为200px,width任意;
        -间隔时间后再次滚动，则:
            scrollOptions:{
                interval:3000,
                step: 40
            }
        -当设置了interval和step，即可当做轮播使用，文字轮播或图片轮播都可,
         如需要【上下】控制器,可以自定义控制器slot内容('up','down'):
            scrollOptions:{
                direction:'up',
                interval:3000,
                step: 40,
                controls:true,
                // padding的大小视自定义slot的【内容高】而定,slot的高为50，则【上下】为50，
                // 此时注意height应在原基础上加 50 * 2 = 100,即原先height: 200 现在height:300
                controlsPadding:[50,0],
                // 切换内容的动画时间
                animateTime: 0.4
            }

        <VueGaplessScroll
            :width="100"
            :height="200"
            :list="data"
            :options="scrollOptions"
        >
            <div class="scroll-box">
                <span class="scroll-item" v-for="v in data" :key="v">{{ v }}</span>
            </div>
        </VueGaplessScroll>
```
```
    2. 【左右】滚动时(direction: 'up' | 'down'): 

        -span的宽度为100px,超过3条即滚动, 则width为300px, height任意;
        -间隔时间后再次滚动，则:
            scrollOptions:{
                direction:'left',
                interval:3000,
                step: 100
            }
        -当设置了interval和step，即可当做轮播使用，文字轮播或图片轮播都可,
         如需要【左右】控制器,可以自定义控制器slot内容('left','right'):
            scrollOptions:{
                direction:'left',
                interval:3000,
                step: 100,
                controls:true,
                // padding的大小视自定义slot的【内容宽】而定,slot的宽为50，则【左右】为50,
                // 此时注意width应在原基础上加 50 * 2 = 100,即原先width: 300 现在width:400
                controlsPadding:[0,50],
                // 切换内容的动画时间
                animateTime: 0.4
            }

        <VueGaplessScroll
            :width="300"
            :height="100"
            :list="data"
            :options="scrollOptions"
        >
            <div class="scroll-box">
                <span class="scroll-item" v-for="v in data" :key="v">{{ v }}</span>
            </div>
        </VueGaplessScroll>
```

---
_Source: https://npm.io/package/vue-gapless-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._