首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效

关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效

作者头像
fruge365
发布2025-12-15 10:56:14
发布2025-12-15 10:56:14
2200
举报

前言

vue2 项目中使用vue-seamless-scroll,复制出来的数据点击无效,经过多方查找总结,终于解决问题了,写篇文章防止下次遇到

参考文章: vue-seamless-scroll 点击click失效 【vue】vue-seamless-scroll点击事件失效 关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效 vue-seamless-scroll 滚动插件的使用及循环的列表点击事件不生效的解决方案

vue2项目中如何使用vue-seamless-scroll依赖,参考之前发布的文章: 【vue】 vue-seamless-scroll 无缝滚动依赖

解决

使用此组件,第二轮数据点击事件失效,采用事件委托解决,父元素绑定一个点击事件@click='clickup($event)',子元素添加JSON.stringify(item)即当前行数据

代码语言:javascript
复制
<template>
  <div
    class="maintable"
    @click="clickup($event)"
    v-if="datalist && datalist.length > 0"
  >
    <vue-seamless-scroll :data="datalist" :class-option="listOption">
      <div class="onebox" v-for="(item, index) in datalist" :key="index">
        <div class="name" :title="item.xm">{{ item.xm }}</div>
        <div class="phone">{{ item.enSjh }}</div>
        <div class="cardnumber">
          {{ item.enSfzh }}
          <!-- {{ item.cardnumber | jmsjh }} -->
        </div>
        <div class="record" :data-obj="JSON.stringify(item)">
          <!-- :data-obj="JSON.stringify(item)" 传递参数 -->
          追踪记录查看
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

点击事件

代码语言:javascript
复制
clickup(e) {
     // 使仅点击按钮触发点击事件
     let row = JSON.parse(e.target.dataset.obj); // 传递参数
     console.log(row,"当前行数据")
 },

下班~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-12-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 解决
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档