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

【vue】实现自动轮播+滚轮控制

news 2025/7/1 1:30:05

前言
有一个无缝轮播+滚轮控制的需求，找了很多的方法发现都没办法完美的实现这种效果。
用原生的js实现不是无缝滚动
用无缝滚动插件实现，发现pc端无法实现滚轮控制

目标

1 实现表格表无缝循环滚动
2 实现滚轮控制表格表数据滚动
3 掌握vue-seamless-scroll使用方式

一些思考
如何去完美的实现无缝轮播+滚轮控制效果呢？，查询了很多资料都没有很完美的兼容两者优点的解决方法。推荐最多的方式就是以下两个：
写JS实现，但实现的思路无外乎用定时+scrollTop去实现（若有其他的方案，欢迎留言），这种scrollTop方式必然导致闪动，不是无缝的。
第三方组件vue-seamless-scroll可以完美的实现无缝自动滚动，但是pc端却也无法通过滚轮去控制滚动。

vue-seamless-scroll无缝滚动的很完美，我就在想能不能试着改动或者操作vue-seamless-scroll组件去实现滚轮控制呢。于是开始了以下的尝试

前期工作

1 安装

npm install vue-seamless-scroll --save

2 引入并注册

import VueSeamlessScroll from "vue-seamless-scroll";
export default {name: "SeamleScroll",components: {VueSeamlessScroll,},
}

3 使用组件

<vue-seamless-scroll ref="seamleScroll" class="seamlessScroll" :data="tableData" :class-option="scrollOptions">
// 要滚动的内容
</vue-seamless-scroll>

在开始之前，先看一下这个第三方组件有哪些参数或者属性

官方源代码：vue-seamless-scroll
vue-seamless-scroll文档
configure

key	描述	默认值	类型
step	滚动速度	1	Number
limitMoveNum	开始无缝滚动的最小数据量	5	Number
hoverStop	是否开启鼠标悬停stop	true	Boolean
direction	方向：0向下 1向上 2向左 3向右	1	Number
openTouch	是否开启移动端触屏	true	Boolean
waitTime	单步运动停止的时间(默认值1000ms)	1000	Boolean

基本属性配置

  data() {return {scrollOptions:{step: 1,limitMoveNum: 2, // 开始无缝滚动的最小数据量hoverStop: true, // 是否开启鼠标悬停stopopenTouch: true, direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)}};},