网站 上传文件,电脑网站与手机的区别是什么,徐汇做网站公司,最常用的网站开发工具问题描述#xff1a; 使用了vue-seamless-scroll#xff0c;里面嵌套了ul li #xff0c;对li进行遍历#xff0c;实现一个滚动列表的效果#xff0c;对每一个li加了test点击事件#xff0c;每次点击一行li时#xff0c;都会触发点击事件#xff0c;但是接口返回的前三…问题描述 使用了vue-seamless-scroll里面嵌套了ul li 对li进行遍历实现一个滚动列表的效果对每一个li加了test点击事件每次点击一行li时都会触发点击事件但是接口返回的前三行数据点击事件不生效的情况是为什么呢
解决 不能点击的原因是因为html元素是复制出来的滚动组件是将后面的复制出来一份进行填铺页面方便滚动 解决方案往滚动组件的父节点上添加绑定事件js冒泡机制通过e.target定位到具体点击位置然后判断点击位置是否是你滚动组件的一列/行 div v-ifmaintenanceDetailInfo.length 0 clickitemClickvue-seamless-scroll :datamaintenanceDetailInfo :class-optionoptionHover classseamless-contulli v-for(item, index) in maintenanceDetailInfo :keyindex classli-cont :data-indexindexspan classtitle1 text_align{{subStr(item.propertyName)}}/spanspan classtitle2 text_align{{subStr(item.deptName)}}/spanspan classtitle3 text_align{{item.maintenanceLevel | levelFlt}}/spanspan classtitle4 text_align{{item.estimatedEndTime}}/spanspan classtitle5 text_align{{subStr(item.maintenanceResult)}}/span/li/ul/vue-seamless-scroll/divitemClick(e) {const item e.target.closest(.li-cont); // 定位元素if (item) { // 是否是滚动组件的某一行/列const { index } item.dataset;this.info this.maintenanceDetailInfo[index]; // 你想获取的数据// 后续操作this.$emit(showMaintenance,this.info)}},
