vue-seamless-scroll 某些点击不生效

问题描述:
使用了vue-seamless-scroll,里面嵌套了ul li ,对li进行遍历,实现一个滚动列表的效果,对每一个li加了test点击事件,每次点击一行li时,都会触发点击事件,但是接口返回的前三行数据点击事件不生效的情况是为什么呢?

解决:
不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动)
解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行

 <div v-if="maintenanceDetailInfo.length > 0" @click="itemClick">
   <vue-seamless-scroll :data="maintenanceDetailInfo" :class-option="optionHover" class="seamless-cont">
      <ul>
        <li v-for="(item, index) in maintenanceDetailInfo" :key="index" class="li-cont" :data-index="index">
          <span class="title1 text_align">{{subStr(item.propertyName)}}</span>
          <span class="title2 text_align">{{subStr(item.deptName)}}</span>
          <span class="title3 text_align">{{item.maintenanceLevel | levelFlt}}</span>
          <span class="title4 text_align">{{item.estimatedEndTime}}</span>
          <span class="title5 text_align">{{subStr(item.maintenanceResult)}}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>



itemClick(e) {
  const item = e.target.closest(".li-cont"); // 定位元素
   if (item) { // 是否是滚动组件的某一行/列
     const { index } = item.dataset;
     this.info = this.maintenanceDetailInfo[index];  // 你想获取的数据
     // 后续操作
     this.$emit('showMaintenance',this.info)
   }
 },
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值