前言

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)即当前行数据

<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>

点击事件

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

下班~

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

  1. vue轮播,展示pdf

    vue轮播,展示pdf 根据左侧图片格式,右侧展示相应的pdf文件与图片.(vue中不支持pdf格式,pdf文件要放在static文件里):代码如下: <template> <!-- ...

  2. WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现

    原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...

  3. vue轮播组件及去掉路由#

    最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...

  4. vue轮播(完整详细版)

    轮播组件vue <swiper :options="swiperOption" class='swiper-box'>     <swiper-slide v-f ...

  5. vue轮播图

    vue开发中遇到这样一个需求实现导航栏和中间内容相结合实现页面滑动导航跟随改变的效果.看效果: 这里我用的是vue所带的插件:vue-awesome-swiper,传送门:https://www.np ...

  6. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  7. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  8. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  9. vue轮播图实现

    1.先安装组件 cnpm install vue-awesome-swiper; 2.在main.js下引入文件: import VueAwsomeSwiper from 'vue-awesome-s ...

  10. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

随机推荐

  1. ETLCloud异常问题分析ai功能

    在数据处理和集成的过程中,异常问题的发生往往会对业务运营造成显著影响.为了提高ETL(提取.转换.加载)流程的稳定性与效率,ETLCloud推出了智能异常问题分析AI功能.这一创新工具旨在实时监测数据 ...

  2. ETLCloud平台组件模版的使用技巧

    ETL工具介绍 在ETLCloud平台中配备了各种不同的组件.模板.规则,用户可运用不同类型的组件来实现想要的业务流程.接下来直接进入平台组件模板的使用技巧说明吧. 使用技巧 1.组件复制 平时在使用 ...

  3. Practice Infinity: Set Theory: Cardinality + Infinity comparation

    Practice Infinity Course description Reckoning with infinity is one of the major accomplishments of ...

  4. SciTech-Mathmatics-Probability+Statistics:Quantifing Uncertainty_统计数据分析:朱怀球PKU-3-Sampling Theory 统计抽样理论基础

    Statistics & Data Analysis - Zhu Huaiqiu, Peking University <统计与数据分析>, 朱怀球, 北京大学 7 Steps § ...

  5. tf.keras.layers.Embedding + tf.keras.layers.TextVectorization + tf.keras.layers.StringLookup + tf.keras.layers.IntegerLookup

    Turns positive integers(indexes) into dense vectors of fixed size. e.g. [[4], [20]] -> [[0.25, 0. ...

  6. 系统哥教大家怎么卸载win10内置应用的方法

    有不少系统之家都喜欢使用原版win10系统,虽然很干净,但是自带很多我们使用不到的内置应用软件程序,比如照片.邮件.人脉等等,那么如何才能卸载win10内置应用呢?下面让系统哥小编教大家怎么卸载自带的 ...

  7. 掌控你的AI编程伙伴:让AI编写高效的提示词和沟通技巧

    在AI辅助编程的时代,开发者的角色正在悄然转变.我们不再仅仅是代码的创作者,更是AI的指挥官.能否清晰.高效地指挥AI,直接决定了我们的开发效率和代码质量.一篇模糊的提示词可能会带来无用的代码片段,而 ...

  8. 搭建一个属于自己的docker镜像加速器

    近期国内的docker镜像加速器已经失效,导致docker镜像拉不下来. 如图所示,阿里云镜像加速器已经失效了: (有人可能会问我,为什么不直接自建harbor仓库把镜像包都放在harbor上,其实这 ...

  9. java+selenium+autoIt 实现下载(打印)功能

    java+selenium+autoIt 实现下载(打印)功能 selenium是一个开源的自动化测试框架,它可以模拟用户对浏览器的操作,进行自动化的测试.但是,它不仅仅只能用来做测试. AutoIt ...

  10. Linux C编程之四 动态库(共享库)的制作(lib + 名字 + .so)

    摘自:https://www.cnblogs.com/xuejiale/p/10788340.html 一.整体大纲 二.共享库的制作 1. 命名规则: lib + 名字 + .so 2. 制作步骤: ...