关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效_vue-seamless-scroll 绑定的点击事件在第二个滚动里面没有效果

关于vue-seamless-scroll

目前，在比较火的可视化页面中轮播表是不可缺少的，而使用vue-seamless-scroll实现表格数据自动滚动也非常简单，实用。下载和使用起来也非常简单。官网

我的问题

上下衔接处数据同步问题,我用的是轮播表里面放的element ui 中的switch 开关，第一遍把开关状态一改变无法同步到第二张copy表中，除非第一张表隐藏以后，数据才能过来，造成了中间好多的“空白期”。

因为有两个overhidden导致点击不同同步dom，在代码中会出现两处vue-seamless-scroll上下悬接，导致原因：下方悬接vue-seamless-scroll是静态的，没同步DOM

解决方法：
在标签中加上ref=“seamlessScroll”

<vue-seamless-scroll
   ref="seamlessScroll"
   >
1
2
3

在js里加上this.$refs.seamlessScroll.reset();就可以了

this.$refs.seamlessScroll.reset(); // 表示重置意思
1

然后又又又有新的问题了

第一个表中的数据滚动完时（真实数据）,第二个copy 表部分的@click事件不起作用（复制出来的数据）,然后找了好多解决方法
其中,采用事件委托的方式是大家几乎都在用的,
通过给vue-seamless-scroll外层div加点击事件，通过event.target获取到点击的dom元素
来获取到数据 可以看大佬这个文章
然而.我用了,数据是取到了,但是因为我用的开关组件,我是要控制开关的,从而还是没能解决我的问题.

改变插件

都快绝望的时候,突然看到了这位老哥的一篇文章对vue-seamless-scroll插件做了详细的讲解,同时也有此插件的不足,
最最最重要的是那老哥自己弄了个插件
我看了这个插件的介绍是: 这个插件虽然没有vue-seamless-scroll这个功能丰富，但他将vue-seamless-scroll不足的地方都弥补了一下。包括复制出来dom的点击事件，及数据的响应依赖都保存了下来。还增加了鼠标的滚轮模式。避免与滚动中的数据交互时的尴尬问题（例：滚动过去的数据要在等下一轮滚动才能交换）。
注意的是 插件推荐数据量小于 1000，以保证插件的性能。
原文链接：https://blog.csdn.net/weixin_43992867/article/details/110622449

使用

安装

npm install @david-j/vue-j-scroll --save-dev
1

引入,在main,js中

import VueScroll from '@david-j/vue-j-scroll';
Vue.use(VueScroll);
1
2

示例:

<vue-j-scroll
 class="seamless-warp"
 :data="ListData"
 :steep="0.3" 
 scrollDirection="top"
 :isRoller="true"
 :rollerScrollDistance="50"
> </vue-j-scroll>

<style lang="less" scoped>
//样式参考
.seamless-warp {
      position: absolute;
      height: 193px;
      width: 550px;
      overflow: hidden;
      }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其中
data 接收异步数据 同步任务可不传
steep 滚动的速率 为正数即可
scrollDirection 滚动的方向 可为: top ,bottom,left,right
isRoller 是否可以使用鼠标滚轮滚动 true,false
rollerScrollDistance 鼠标滚轮滚动的速率（isRoller 必须为 true）为正数即可

当scrollDirection 为top或bottom时，一定要为 vue-j-scroll 组件设置高度。 当scrollDirection 为left或right时，一定要为 vue-j-scroll 组件设置宽度

vue-j-scroll总结

vue-j-scroll 插件和vue-seamless-scroll插件用法差不多,甚至前者更简洁,增加了鼠标滚动人性化操作,
我感觉vue-j-scroll 插件可以当作是vue-seamless-scroll的升级款.
vue-j-scroll 插件解决了我 上下表衔接处数据同步问题,和解决了我上下表衔接处无法点击控制开关组件的问题.