当前位置: 首页 > news >正文

[vue] vue-seamless-scroll 滚动到第二遍的时候不能进行点击的问题

问题:使用vue-seamless-scroll组件时,循环第一遍可以正常点击,之后不能够正常点击,触发不了点击事件.

解决办法:在vue-seamless-scroll外的父元素上添加点击事件,利用js的事件委托(通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素)

使用(data-XXX)自定义属性
可以给每一层都加上

<div class="rightBottom scroll__common" @click="clickProp($event)"><vue-seamless-scroll:data="equipmentList":class-option="classOption"class="warp"style="width: 100%"><div:class="getClass(item.equStatus)"v-for="(item, index) in equipmentList":key="index"><divclass="deviceNum"@click="toDetail(item.id, item)":data-id="JSON.stringify(item.id)":data-index="index"><spanclass="name":data-id="JSON.stringify(item.id)":data-index="index">{{ item.name }}</span><spanclass="num":data-id="JSON.stringify(item.id)":data-index="index">{{ item.num }}</span></div></div></vue-seamless-scroll>
</div>
clickProp(event){let eid = event.target.dataset.eid;let index = event.target.dataset.eid
},

参考:

关于使用vue-seamless-scroll,滚动到第二遍的时候不能进行点击的问题记录

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 如何删除git提交记录
  • js读取文件,生成随机题目,多项选择题则提供随机答案供选择
  • 两段有趣的代码(C语言函数指针)
  • 在C++中,如何避免出现Bug?
  • Mini-Omni 语言模型在流式传输中边思考边听说应用
  • C++ 封装 Socket 进行通信
  • Docker上安装mysql
  • 【Day14-单例设计模式动态代理】
  • Docker torchserve 部署模型流程
  • 数据分析-前期数据处理
  • 雷达液位计助力造纸行业精准测量
  • Spring security 动态权限管理(基于数据库)
  • 使用Python生成多种不同类型的Excel图表
  • 计算机毕业设计 毕业季一站式旅游服务定制平台的设计与实现 Java实战项目 附源码+文档+视频讲解
  • Ribbon (WPF)
  • 08.Android之View事件问题
  • css属性的继承、初识值、计算值、当前值、应用值
  • java小心机(3)| 浅析finalize()
  • js写一个简单的选项卡
  • LeetCode算法系列_0891_子序列宽度之和
  • Python学习之路16-使用API
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • 使用putty远程连接linux
  • 携程小程序初体验
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • ​Java基础复习笔记 第16章:网络编程
  • #APPINVENTOR学习记录
  • #QT项目实战(天气预报)
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (python)数据结构---字典
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (第一天)包装对象、作用域、创建对象
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (更新)A股上市公司华证ESG评级得分稳健性校验ESG得分年均值中位数(2009-2023年.12)
  • (转)shell调试方法
  • **《Linux/Unix系统编程手册》读书笔记24章**
  • *算法训练(leetcode)第四十五天 | 101. 孤岛的总面积、102. 沉没孤岛、103. 水流问题、104. 建造最大岛屿
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .Net+SQL Server企业应用性能优化笔记4——精确查找瓶颈
  • .Net开发笔记(二十)创建一个需要授权的第三方组件
  • .net开发引用程序集提示没有强名称的解决办法
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [AIGC] 开源流程引擎哪个好,如何选型?
  • [C/C++入门][字符与ASCII码]6、用代码来转换字符与它的ASCII码
  • [CSS]盒子模型
  • [flume$2]记录一个写自定义Flume拦截器遇到的错误
  • [leetcode]beautiful-arrangement. 优美的排列
  • [Manacher]【学习笔记】
  • [NOI2022] 众数 题解
  • [poj 2001]Shortest Prefixes [Trie]
  • [sd_scripts]之train
  • [UML]UML系列——类图class的实现关系Realization