复制代码
yarn add seamless-scroll-v3
# 或者使用 npm
npm install seamless-scroll-v3
# 或者使用 pnpm
pnpm add seamless-scroll-v3
实现效果：
template中的代码：
javascript
复制代码
<div v-if="trainProcessList?.length > 0">
<SeamlessScroll
ref="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中的代码：
javascript
复制代码
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，表示即使鼠标悬停，滚动也不会停止。