当前位置：首页 > article >正文

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

article 2024/11/16 6:03:09

安装：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">
          <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中的代码：

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，表示即使鼠标悬停，滚动也不会停止。