一、问题描述
为无缝滚动的每一项添加点击事件，当滚动到下一屏点击事件无法生效
<!-- 表格轮询滚动 -->
<div class="seamless-scroll-wrapper">
<vue-seamless-scroll
class="seamless-scroll"
:data="dataList"
:class-option="classOption"
:delay="5000"
>
<ul>
<!-- itemClick在滚动到下一屏的时候点击无效 -->
<li @click="itemClick(item)" v-for="(item, index) in dataList" :key="index">
{
{ item.name }}
</li>
</ul>
</vue-seamless-scroll>
</div>
原因分析： vue-seamless-scroll实现滚动的原理就是，拿到原数据，将数据复制了一份html出来，进行填铺页面，方便滚动的，而这些复制出来的并没有绑定事件。
二、解决办法
使用事件委托实现子元素的点击事件处理
2.1. 关于事件委托
- 事件委托理解： https://cloud.tencent.com/developer/article/2434471
- 相关知识点：
1）事件流：一个完整的事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段
2）事件冒泡：事件从目标元素接收，逐层往父组件传播至 document。
3）事件捕获：与事件冒泡相反，从 document 往里直至目标元素接收到。
4）事件委托：就是利用事件流中的冒泡效应，将子元素的处理程序统一绑定到父元素上。
2.2. 解决思路
将事件统一放到外层的 div 上
利用data-xxx为元素绑定额外值
使用e.target.dataset.xxx取到绑定的额外值
- 代码如下：
html
<!-- 表格轮询滚动 -->
<div class="seamless-scroll-wrapper" @click="tableClick">
<vue-seamless-scroll
class="seamless-scroll"
:data="dataList"
:class-option="classOption"
:delay="5000"
>
<ul>
<!-- data-row把当前行数据当做额外数据传入 -->
<li :data-row="JSON.stringify(item)" v-for="(item, index) in dataList" :key="index">
{
{ item.name }}
</li>
</ul>
</vue-seamless-scroll>
</div>
// 事件委托解决复制的HTML无法点击的问题
tableClick(e) {
try {
const row = JSON.parse(e.target.dataset?.row); // 使用dataset获取当前点击行的数据
this.viewDetail(row); // 查看详情
} catch (error) {
console.log("JSON parse error>>>>>>>>>>>>>>>>>>", error);
}
},