当前位置:   article > 正文

vue-seamless-scroll 点击事件不生效_vue-seamless-scroll实现点击效果不起作用

vue-seamless-scroll实现点击效果不起作用

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

具体实现

  1. <div class="boxContent-public-main" @click="chooseCompany">
  2. <vue-seamless-scroll
  3. class="warp"
  4. v-if="companyList.length > 0"
  5. :data="companyList"
  6. :class-option="classOption"
  7. >
  8. <div class="warp-item">
  9. <div
  10. class="warp-item-li"
  11. v-for="(item, index) in companyList"
  12. :key="item.id"
  13. :chooseIndex="index" // 自定义参数为了方便能获取到点击的哪一项也可以使用JSON.stringify(item);)
  14. >
  15. <div class="warp-item-left">
  16. <span class="warp-item-left-title">{{ item.name }}</span>
  17. <em class="">({{ item.address }})</em>
  18. </div>
  19. <div class="warp-item-right" v-html="item.intro"></div>
  20. </div>
  21. </div>
  22. </vue-seamless-scroll>
  23. <div v-else class="none">暂无公司数据...</div>
  24. </div>
  25. chooseCompany(e: any) {
  26. const child: any = e.target.closest(".warp-item-li"); // 获取点击的那一项
  27. let index: any = child.getAttribute("chooseIndex"); // 获取那一项自定义的 chooseIndex参数
  28. if (index) {
  29. // 逻辑代码...
  30. (this.$parent as any).showCompanyDialog(this.companyList[index]);
  31. }
  32. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/903977
推荐阅读
相关标签
  

闽ICP备14008679号