利用vue3SeamlessScroll简单实现列表的无限循环滚动，仅需几秒配置_vue3 表格循环滚动

Vue3SeamlessScroll

该组件用于实现列表的无限循环滚动

1、安装

yarn add vue3-seamless-scroll

2、导入及基本使用

<!--组件.vue-->
<script setup>
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import {ref} from 'vue'
    //vue3导入组件是不需要用component注册的
    //导入完成后如果项目本身是在运行的记得重新编译项目，不然会报错，如npm run dev
    const listData = ref([
        {title:'事件1',content:'内容1'},
        {title:'事件2',content:'内容2'},
        {title:'事件3',content:'内容3'},
        {title:'事件4',content:'内容4'},
    ])
    const isScroll=ref(true)
</script>
<template>
	<div class="contain">
        <vue3-seamless-scroll
            class="scroll"
            v-model="isScroll"
            :list="listData"
            :step="0.3"
            :hover="true"
            :limit-scroll-num="3"
            :wheel="true"
        >
            <div v-for="item in listData" class="item">
                <div class="title">
                    {{item.title}}:{{item.content}}
    			  </div>
    		</div>
    	</vue3-seamless-scroll>
    </div>
</template>
<style>
    .scroll{
       /* 必需要设置合适的高,因为他的原理是往列表最后添加列表重复元素，所以这个组件高不要大于其内容原先的最大高度 */
          height: 90px;
          width: 300px;
          overflow: hidden;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

3、配置项及解释

在标签中配置配置项(props属性)

• list

  无缝滚动列表数据，组件内部使用列表长度。

    type: Array
    required: true
  1
  2

• v-model

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

    type: Boolean,
    default: true,
    required: false
  1
  2
  3

• direction

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

    type: String,
    default: "up",
    required: false
  1
  2
  3

• isWatch

  开启数据更新监听

    type: Boolean,
    default: true,
    required: false
  1
  2
  3

• hover

  是否开启鼠标悬停

    type: Boolean,
    default: false,
    required: false
  1
  2
  3

• count

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

    type: Number,
    default: "infinite",
    required: false
  1
  2
  3

• limitScrollNum

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

    type: Number,
    default: 5,
    required: false
  1
  2
  3

• step

  步进速度

    type: Number,
    required: false
  1
  2

• singleHeight

  单步运动停止的高度

    type: Number,
    default: 0,
    required: false
  1
  2
  3

• singleWidth

  单步运动停止的宽度

    type: Number,
    default: 0,
    required: false
  1
  2
  3

• singleWaitTime

  单步停止等待时间(默认值 1000ms)

    type: Number,
    default: 1000,
    required: false
  1
  2
  3

• isRemUnit

  singleHeight and singleWidth 是否开启 rem 度量

    type: Boolean,
    default: true,
    required: false
  1
  2
  3

• delay

  动画延时时间

    type: Number,
    default: 0,
    required: false
  1
  2
  3

• ease

  动画效果，可以传入贝塞尔曲线数值

    type: String | cubic-bezier,
    default: "ease-in",
    required: false
  1
  2
  3

• copyNum

  拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果

    type: Number,
    default: 1,
    required: false
  1
  2
  3

• wheel

  在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启

    type: boolean,
    default: false,
    required: false
  1
  2
  3

• singleLine

  启用单行横向滚动

    type: boolean,
    default: false,
    required: false
  1
  2
  3