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

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

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

使用(data-XXX)自定义属性

可以给每一层都加上

html 复制代码
<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"
    >
      <div
        class="deviceNum"
        @click="toDetail(item.id, item)"
        :data-id="JSON.stringify(item.id)"
        :data-index="index"
      >
        <span
          class="name"
          :data-id="JSON.stringify(item.id)"
          :data-index="index"
          >{{ item.name }}</span
        >
        <span
          class="num"
          :data-id="JSON.stringify(item.id)"
          :data-index="index"
          >{{ item.num }}</span
        >
      </div>
    </div>
  </vue-seamless-scroll>
</div>
js 复制代码
clickProp(event){
  let eid = event.target.dataset.eid;
  let index = event.target.dataset.eid
},

参考:

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

相关推荐
zhanghaisong_20154 分钟前
Caused by: org.attoparser.ParseException:
前端·javascript·html·thymeleaf
Eric_见嘉7 分钟前
真的能无限试(白)用(嫖)cursor 吗?
前端·visual studio code
DK七七37 分钟前
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
老赵的博客1 小时前
QSS 设置bug
前端·bug·音视频
Chikaoya1 小时前
项目中用户数据获取遇到bug
前端·typescript·vue·bug
南城夏季1 小时前
蓝领招聘二期笔记
前端·javascript·笔记
Huazie1 小时前
来花个几分钟,轻松掌握 Hexo Diversity 主题配置内容
前端·javascript·hexo
NoloveisGod1 小时前
Vue的基础使用
前端·javascript·vue.js
GISer_Jing1 小时前
前端系统设计面试题(二)Javascript\Vue
前端·javascript·vue.js
海上彼尚2 小时前
实现3D热力图
前端·javascript·3d