vueseamlessscroll无缝滚动事件用法、@click点击事件失效问题

使用方法：

1、安装

npm install vue-seamless-scroll --save


2、引入


import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},


3、配置参数

// 监听属性 类似于data概念

computed: {
defaultOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},　


注意事项：

滚动重复加载问题：第一轮与第二轮数据同时显示，第二轮的数据@click点击事件无法生效。
解决方法：

1. 给外层加点击事件，event.target获取点击dom元素
2. 绑定属性，利用:**data-**name获取，
3. 调用：与:data-name对应，获取自定义属性name时候用event.target.dataset.name
   
   

原理分析：
事件委托
事件委托
阮一峰老师的js运行机制
事件委托依靠的就是事件冒泡和事件捕获的机制

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

所谓的事件委托就是通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

完整代码：

参考链接：
https://www.jianshu.com/p/a2a7d3a9cf2b
https://blog.csdn.net/weixin_43254676/article/details/94025887