使用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 看这里,就不一一展示了

相关推荐
百事老饼干几秒前
Java[面试题]-真实面试
java·开发语言·面试
理想不理想v21 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我22 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记35 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜35 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=35 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧38 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck40 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
白子寰44 分钟前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT1 小时前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习