利用vue3SeamlessScroll 简单实现列表的无限循环滚动

Vue3SeamlessScroll

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

1、安装

npm i 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>

3、配置项及解释

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

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

 singleHeight

单步运动停止的高度

  type: Number,
  default: 0,
  required: false

singleWidth

单步运动停止的宽度

  type: Number,
  default: 0,
  required: false

singleWaitTime

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

  type: Number,
  default: 1000,
  required: false

isRemUnit

singleHeight and singleWidth 是否开启 rem 度量

  type: Boolean,
  default: true,
  required: false

delay

动画延时时间

  type: Number,
  default: 0,
  required: false

ease

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

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

copyNum

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

  type: Number,
  default: 1,
  required: false

wheel

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

  type: boolean,
  default: false,
  required: false

singleLine

启用单行横向滚动

type: boolean,
  default: false,
  required: false

参考文章 ：利用vue3SeamlessScroll简单实现列表的无限循环滚动，仅需几秒配置_vue3 表格循环滚动-CSDN博客