个人技术分享

前言
有一个无缝轮播+滚轮控制的需求，找了很多的方法发现都没办法完美的实现这种效果。
用原生的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

基本属性配置

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

将基本配置scrollOptions传递给第三方组件vue-seamless-scroll