使用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中的代码:

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

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

相关推荐
生椰拿铁You4 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
喵叔哟12 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生15 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生18 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_3842410918 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap30 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
hopetomorrow31 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
loooseFish38 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull41 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript