Vue3无缝滚动----vue3-seamless-scroll

在一些大屏可视化项目中，经常会用到滚动的样式。

安装

npm install vue3-seamless-scroll --save
1

main.js中引入

import vue3SeamlessScroll from 'vue3-seamless-scroll';
const app = createApp(App);
app.use(vue3SeamlessScroll)
1
2
3

使用

 <vue3-seamless-scroll
    hover-stop="true"
    :list="listData"
    hover="true"
    step="0.3">
    <div
      v-for="(item, index) in listData"
      :key="index"
      class="item"
      style="padding: 10px; margin: 5px; font-size: 14px">
      <span v-for="(value, key, ind) in item" :key="ind" class="spanClass">{{
        value
      }}</span>
    </div>
  </vue3-seamless-scroll>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

组件配置

list

无缝滚动列表的数据，组件内部使用列表长度。（注意：这也是这个组件的不足之处，在项目中不支持动态更改其长度，一旦初始化只可以更改其内容，不可以更改其长度）

type: Array
required: true

v-model

通过v-model控制动画滚动和停止，默认开始滚动。

type: Boolean,
default: true,
required: false

direction

控制滚动方向，可选值up、down、left、right

type: String,
default: “up”,
required: false

isWatch

开启数据更新监听

type: Boolean,
default: true,
required: false

hover

是否开启鼠标悬停

type: Boolean,
default: false,
required: false

count

动画循环次数，默认无限循环

type: Number,
default: “infinite”,
required: false

limitScrollNum

开启滚动的数据量，只有列表长度大于等于该值才会滚动

type: Number,
default: 5,
required: false

step

步进速度

type: Number,
required: false

指南在这里