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

vue-seamless-scroll 点击事件不生效

问题:在使用此插件时发现,列表内容前几行还是能正常点击的,但是从第二次出现的列表开始就没有点击事件了
原因:因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动)
解决:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行

具体实现

 <div class="boxContent-public-main" @click="chooseCompany"><vue-seamless-scrollclass="warp"v-if="companyList.length > 0":data="companyList":class-option="classOption"><div class="warp-item"><divclass="warp-item-li"v-for="(item, index) in companyList":key="item.id":chooseIndex="index" // 自定义参数,为了方便能获取到点击的哪一项(也可以使用JSON.stringify(item);)><div class="warp-item-left"><span class="warp-item-left-title">{{ item.name }}</span><em class="">({{ item.address }})</em></div><div class="warp-item-right" v-html="item.intro"></div></div></div></vue-seamless-scroll><div v-else class="none">暂无公司数据...</div></div>chooseCompany(e: any) {const child: any = e.target.closest(".warp-item-li"); // 获取点击的那一项let index: any = child.getAttribute("chooseIndex"); // 获取那一项自定义的 chooseIndex参数if (index) {// 逻辑代码...(this.$parent as any).showCompanyDialog(this.companyList[index]);}}

http://www.lryc.cn/news/313257.html

相关文章:

  • 前端工程部署步骤小记
  • TS常见问题
  • linux系统nginx常用命令
  • MySQl基础入门③
  • idea Gradle 控制台中文乱码
  • 嵌入式学习day31 网络
  • Docker网络+原理+link+自定义网络
  • Effective C++ 学习笔记 条款16 成对使用new和delete时要采取相同形式
  • PokéLLMon 源码解析(四)
  • 区块链基础知识01
  • YOLOv9(2):YOLOv9网络结构
  • 提取b站字幕(视频字幕、AI字幕)
  • JAVA程序员如何快速熟悉新项目?
  • 慢sql优化记录1
  • 堆和堆排序
  • STM32 | 零基础 STM32 第一天
  • day16_购物车(添加购物车,购物车列表查询,删除购物车商品,更新选中商品状态,完成购物车商品的全选,清空购物车)
  • 基于Spring Boot的图书个性化推荐系统 ,计算机毕业设计(带源码+论文)
  • libevent源码解析:定时器事件(三)
  • 3D资产管理
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Blank)
  • 【手游联运平台搭建】游戏平台的作用
  • 手把手教会你 - StreamAPI基本用法
  • 和为K的子数组
  • Redis:java中redis的基本使用(springboot)
  • 微型计算机技术
  • mysql下载教程
  • ResponseStatusException
  • 第五十二回 戴宗二取公孙胜 李逵独劈罗真人-飞桨AI框架安装和使用示例
  • CSAPP-程序的机器级表示