vue-seamless-scroll使用中遇到关于click的问题

红太狼 2022-09-07 15:54 363阅读 0赞

使用vue-seamless-scroll实现数据无缝连续滚动

https://blog.csdn.net/weixin_43254676/article/details/94025887

原理
基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动

遇到的问题
当ul1中的数据未滚动完时,ul2 部分的click事件不起作用，无法实现功能

（此时可见区域内一部分数据为ul1，一部分数据为ul2）

简单分析
第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由于重复渲染，相同的部分绑定的事件不能同时运行，需要换个思路。当时同学提到了 js事件委托，需要好好了解一下。
事件委托、
事件委托
阮一峰老师的js运行机制了解一下
事件委托依靠的就是事件冒泡和事件捕获的机制

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

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

解决问题
1.给外层div加点击事件，通过event.target获取到点击的dom元素

获取到event 和 event.target如下

获取到了button之后，因为接下来的操作还需要用到ID和name，所以要给button绑定属性

id和name是button自带的属性，vue中自定义属性时还需要添加前缀 data- 获取时要加 dataset

控制台打印数据如下

现在获取到了所有想要的数据 和 要响应的事件，接下来执行事件即可。

代码如下：




  • 编号

  • 员工姓名

  • 一氧化碳(ppm)

  • 甲烷(%)

  • 氧气(%)

  • 温度(℃)

  • 湿度(%)

  • 地点

  • 操作






  • { { item.sequenceId }}


    { { item.staffName }}


    // 部分省略








原文链接：https://blog.csdn.net/weixin\_43254676/article/details/94025887

发表评论

表情：
评论列表 （有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读