vue3实现列表无缝滚动
前言：
之前有说过vue2的列表无缝滚动，这里说一下vue3升级版本的
实现效果
安装
npm i vue3-seamless-scroll全局配置：main.js中配置
import { createApp } from 'vue'
import App from './App.vue'import vueSeamlessScroll from 'vue3-seamless-scroll';const app = createApp(App)
app.use(vueSeamlessScroll)
样式：需要一个高度
.my-scroll-container {height: 300px; /* 设置一个明确的高度 */overflow: hidden; /* 隐藏超出部分 */
}
界面使用：
<vue-seamless-scroll:list="PolicyList":hover="true":class-option="scrollConfig"ref="seamlessScroll"
><ul class="item"><li v-for="item in PolicyList" :class="{'active': currentPolicy.id === item.id}" :key="item.id" v-text="item.name" :title="item.name" @click="getSinglePolicyInfo(item)"></li></ul>
</vue-seamless-scroll>const scrollConfig = ref({singleHeight: 30,waitTime: 10000,autoPlay: true
})配置文档：
| 属性名 | 说明 | 类型 | 默认值 | 可选值/备注 |
|---|---|---|---|---|
list | 滚动列表数据 | Array | - | 必需，组件内部会使用列表长度 |
v-model | 控制动画滚动与停止 | Boolean | true | true为开始滚动 |
direction | 滚动方向 | String | "up" | "up", "down", "left", "right" |
step | 步进速度，数值越大越快 | Number | - | 未设置默认值 |
hover | 是否开启鼠标悬停暂停 | Boolean | false | |
wheel | 悬停时是否开启滚轮控制 | Boolean | false | 需要hover为true |
limitScrollNum | 开启滚动的数据量阈值 | Number | 5 | 列表长度≥此值才会滚动 |
isWatch | 是否开启数据更新监听 | Boolean | true | |
singleHeight | 单步运动停止的高度 | Number | 0 | 0代表无缝不停止滚动 |
singleWidth | 单步运动停止的宽度 | Number | 0 | 0代表无缝不停止滚动 |
singleWaitTime | 单步停止等待时间(ms) | Number | 1000 | |
count | 动画循环次数 | Number | "infinite" | 默认无限循环 |
copyNum | 拷贝列表次数 | Number | 1 | 用于确保无缝滚动效果 |
ease | 动画缓动效果 | String | "ease-in" | 可传入贝塞尔曲线值 |