# vue-list-marquee

> A Vue.js project, (基于vue2的列表滚动插件)

Latest version **1.0.48** (published 2019-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-list-marquee
pnpm add vue-list-marquee
yarn add vue-list-marquee
bun add vue-list-marquee
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.48 |
| Published | 2019-07-20 |
| First published | 2018-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 0 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | lijunqi |
| Maintainers | hz-ljq |
| Keywords | list, marquee, swiper, vue-marquee, vue marquee, list-marquee, list marquee, vue-list, vue list, vue-list-marquee, vue list marquee |

## Links

- npm: https://www.npmjs.com/package/vue-list-marquee
- Repository: https://github.com/hz-ljq/vue-list-marquee
- Homepage: https://github.com/hz-ljq/vue-list-marquee#readme
- Issues: https://github.com/hz-ljq/vue-list-marquee/issues
- npm.io page: https://npm.io/package/vue-list-marquee

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.48 (latest) — 2019-07-20
- 1.0.47 — 2019-03-31
- 1.0.46 — 2019-03-30
- 1.0.45 — 2019-03-29
- 1.0.44 — 2019-03-27
- 1.0.43 — 2019-03-26
- 1.0.42 — 2019-03-25
- 1.0.41 — 2019-03-24
- 1.0.40 — 2019-03-24
- 1.0.39 — 2019-03-24
- 1.0.38 — 2019-03-19
- 1.0.37 — 2019-03-18
- 1.0.36 — 2019-03-18
- 1.0.35 — 2018-10-09
- 1.0.34 — 2018-09-12
- … 34 more at https://npm.io/package/vue-list-marquee/versions

## README

# vue-list-marquee

> 基于vue2的列表滚动插件
```
特点1：滚动方向，自下而上；
特点2：当列表内容超过列表高度，自动滚动，否则，不滚动；
特点3：如果滚动，则首尾无缝拼接；
```

### Demo演示:
![image](https://github.com/hz-ljq/vue-list-marquee/blob/master/src/assets/images/demo.gif)

### NPM
```
npm install vue-list-marquee --save
```

### Mount
- mount with global
```js
import Vue from 'vue'
// require styles
import 'vue-list-marquee/dist/vue-list-marquee.css'
import VueListMarquee from 'vue-list-marquee'
Vue.use(VueListMarquee)
```

- mount with component
```js
// require styles
import 'vue-list-marquee/dist/vue-list-marquee.css'
import { VueListMarquee } from 'vue-list-marquee'
export default {
  components: {
    VueListMarquee
  }
}
```

### Usage
```js
<vue-list-marquee class='my-marquee' :listData='myList' :option='myOption'>
  <template slot-scope="{ item, index }">

    <!-- 每一条内容的结构 -->
    <div class="list-item">
      <div class='col1'>-{{index}}-</div>
      <div class='col2' :title="item.content">{{item.content}}</div>
    </div>

  </template>
</vue-list-marquee>
```

### Demo参考:
<https://github.com/hz-ljq/vue-list-marquee/blob/master/src/components/Demo.vue>

### Props
| Name | Type | Default | Description |
| ------ | ------ | ------ | ------ |
| :listData | Array | [] | <font size=2>列表内容数组 |
| :option | Object | moveTime: 1000,<br/>needRestTime: true,<br/>restTime: 2000,<br/>needHover: false,<br/>delayTime: 3000,<br/>timingFunc: 'linear' | <font size=2>配置项 |

### :option（Detail explanation）
| Name | Type | Default | Description |
| ------ | ------ | ------ | ------ |
| moveTime | Number | <font size=1>1000（单位：ms） | <font size=1>滚动一个条目高度的过渡时间； |
| needRestTime | Boolean | true| <font size=1>每滚动一个条目，是否需要停顿；如果为false，restTime属性将无效； |
| restTime | Number | <font size=1>2000（单位：ms） | <font size=1>每滚动一个条目后的停顿时间(尽量大于100，否则效果不好)，needRestTime为true时，才有效； |
| needHover | Boolean | true | <font size=1>当鼠标移入和移出时，是否需要暂停和继续滚动；|
| delayTime | Number | 3000（单位：ms） | <font size=1>当滚动列表数据更新时，等待该延迟时间后，再进行滚动；|
| timingFunc | String | 'linear' | <font size=1>速度曲线【可选值： linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)】；当needRestTime为true时，才有效；|

- - -

### 关于option.needRestTime属性：
- 设置为false：通过定时器，实现滚动效果（不停顿）；
```
优点：以像素作为滚动粒度，当鼠标移入暂停滚动时，能观察到这个优点；
缺点：性能相对差一些，因为为了效果流畅，定时器时间间隔较短；
```
- <span style="color: red;">（推荐）</span>设置为true：定时器配合css3的transition过渡，实现每滚动一个条目就停顿一段时间的效果；
```
优点：性能相对好一些，因为定时器时间间隔较长，transition性能较高；
缺点：以单个条目的高度为滚动粒度，当鼠标移入暂停滚动时，能观察到这个问题；
```

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