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博客