vue-seamless-scroll无缝滚动到下一屏点击事件失效的解决办法

一、问题描述

为无缝滚动的每一项添加点击事件，当滚动到下一屏点击事件无法生效

<div class="seamless-scroll-wrapper">
   <ul class="news-list">
       <VueSeamlessScroll class="seamless-warp" :data="messageList" :class-option="defineScroll">
           <li v-for="(item, index) in messageList" :key="index" @click="handleOpen(item)">
               <span class="content">【{{ item.title }}】{{ item.content
               }}</span>
               <span class="date new">2025-03-10</span>
           </li>
       </VueSeamlessScroll>
   </ul>
</div>

原因分析： vue-seamless-scroll实现滚动的原理就是，拿到原数据，将数据复制了一份html出来，进行填铺页面，方便滚动的，而这些复制出来的并没有绑定事件。

二、解决办法

使用事件委托实现子元素的点击事件处理

关于事件委托

事件委托理解： https://cloud.tencent.com/developer/article/2434471
相关知识点：
1）事件流：一个完整的事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段
2）事件冒泡：事件从目标元素接收，逐层往父组件传播至 document。
3）事件捕获：与事件冒泡相反，从 document 往里直至目标元素接收到。
4）事件委托：就是利用事件流中的冒泡效应，将子元素的处理程序统一绑定到父元素上。

解决办法

将事件统一放到外层的 div 上
利用data-xxx为元素绑定额外值
使用e.target.dataset.xxx取到绑定的额外值
代码如下：

<div class="seamless-scroll-wrapper" @click="handleClick($event)">
    <ul class="news-list">
        <VueSeamlessScroll class="seamless-warp" :data="messageList" :class-option="defineScroll">
            <li v-for="(item, index) in messageList" :key="index" @click="handleOpen(item)">
                <span :data-row="JSON.stringify(item)" class="content">【{{ item.title }}】{{ item.content
                }}</span>
                <span :data-row="JSON.stringify(item)" class="date new">2025-03-10</span>
            </li>
        </VueSeamlessScroll>
    </ul>
</div>

// 事件委托解决复制的HTML无法点击的问题
tableClick(e) {
  try {
    const row = JSON.parse(e.target.dataset?.row); // 使用dataset获取当前点击行的数据
    this.xxxx(row); // 查看详情
  } catch (error) {
    console.log("JSON parse error>>>>>>>>>>>>>>>>>>", error);
  }
},