安装: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中的代码:
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
,表示即使鼠标悬停,滚动也不会停止。