使用seamless-scroll-v3 实现无缝滚动,自动轮播平滑的滚动效果

安装：npm地址：https://www.npmjs.com/package/seamless-scroll-v3

yarn add seamless-scroll-v3# 或者使用 npm
npm install seamless-scroll-v3# 或者使用 pnpm
pnpm add seamless-scroll-v3

实现效果：

template中的代码：

<div v-if="trainProcessList?.length > 0"><SeamlessScrollref="trainProcess":data="trainProcessList":class-option="classOptions"class="warp"><div class="powerList-trusteeship" v-for="item in trainProcessList" :key="item"><div class="powerList-box flex items-center justify-between"><div class="time">消耗项：{{ item.processName }}</div><div class="time">店铺：{{ item.processDesc }}</div><div class="time">已消耗{{ item.processPower }}算力</div><div class="time">已用时间{{ formatTimeWithDays(item.processTime) }}</div></div></div></SeamlessScroll></div>

script中的代码：

import { ref, onMounted, onUnmounted } from 'vue'
import SeamlessScroll from 'seamless-scroll-v3'const trainProcess = ref(null)
const trainProcessList = ref<TrainProcessList[]>([])const classOptions = ref({direction: 'bottom',step: 2,limitMoveNum: 5,hoverStop: false
})

• direction: 定义滚动的方向。在这个例子中，设置为 'bottom' 表示内容将从底部向上滚动。
• step: 定义每次滚动的步长，即滚动的距离。在这个例子中，设置为 2，意味着每次滚动将移动两行内容的高度。
• limitMoveNum: 定义滚动的最大次数。在这个例子中，设置为 5，意味着内容最多滚动五次。
• hoverStop: 定义当鼠标悬停在滚动区域时是否停止滚动。在这个例子中，设置为 false，表示即使鼠标悬停，滚动也不会停止。

具体参数：Properties | vue-seamless-scroll 看这里，就不一一展示了