首页 > 其他分享 >[vue] vue-seamless-scroll 滚动到第二遍的时候不能进行点击的问题

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

时间:2024-09-25 13:57:38浏览次数:9  
标签:vue seamless scroll 点击 eid event


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

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

使用(data-XXX)自定义属性
可以给每一层都加上

<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>
clickProp(event){
  let eid = event.target.dataset.eid;
  let index = event.target.dataset.eid
},

参考:

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

标签:vue,seamless,scroll,点击,eid,event
From: https://blog.51cto.com/u_12881709/12108281

相关文章

  • 【万字文档+PPT+源码】基于springboot+vue二手交易平台-可用于毕设-课程设计-练手学习
    博主简介:......
  • vue项目中——如何用echarts实现动态水球图
            有时候UI的脑洞真的很大,总是设计出一些稀奇古怪的图形,但又不得不佩服他们的审美,确实还挺好看的。今天给大家介绍echarts如何实现动态水球图。如图所示:  实现步骤一、引入在vue页面中引入echarts,如未安装需要先npm安装html:<template><divid="chart">......
  • Vue3 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI
    前言Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解高德地图根据当前定位获取周边附近的商圈,vue3高德地图获取周边商圈并将这些地址位置列出来供用户点击跳转和选择,获取当前位置或指定区域周边的交通出行、学校教育、医院诊所、商场购物、生活娱乐、旅游景......
  • 搭建一个前后端分离的Vue框架(windows 前端篇)
    一:前言:前段时间出来一期Python Django框架的安装搭建以及数据库配置、解决跨域等相关问题都已经写在后端文章中了,本期主要是给大家出一期前端框架的搭建以及向后端发送请求,让大家更加直观的看到前后端联调的一个效果,废话少说,直接开始上手,首先我们先了解一下Vue框架,大家可以......
  • 基于SpringBoot+Vue的宠物领养系统的设计与实现-毕业设计源码33575
    目 录摘要1绪论1.1研究背景1.2 研究意义1.3论文结构与章节安排2 相关技术介绍2.1B/S结构2.2SpringBoot框架2.3MySQL数据库3系统分析3.1可行性分析3.2系统流程分析3.2.1数据新增流程3.2.2 数据删除流程3.3 系统功能分析3.3.1......
  • 关于在vue2中自定义右键弹窗
            所需变量//右键点击的弹框对象rightDialogbox:null,//鼠标点击后获取的文本chooseText:'',//弹窗的偏移left:'',top:'',//右键点击的弹框显隐rightDialogShow:false,一、阻止原生事件......
  • 学习vue——路由
    一、配置vue2路由router/index.js1importVuefrom'vue'2importVueRouterfrom'vue-router'3importMyHeaderfrom'@/components/MyHeader.vue'4importMyMainfrom'@/components/MyMain.vue'56Vue.use(VueRouter......
  • vue 浏览器指纹-fingerprintjs
    FingerprintJS是一个用于创建用户浏览器指纹的开源库。在Vue应用中使用FingerprintJS可以帮助你追踪用户的浏览器信息,从而实现个性化的服务或者分析用户行为。首先,你需要安装FingerprintJS:npminstall@fingerprintjs/fingerprintjs然后,你可以在Vue组件中使用它来创......
  • ❗Vue原理 (必考!)
    1.组件化基础如何理解MVVM?-----很久以前就有组件化,数据驱动视图(MVVM,setState)Vue、React框架的出现,使得我们可以直接去操控数据而不是原始的DOM节点。View:视图DOMModel:VUE组件里的data或者Vuex里state里面的数据。两者之间通过ViewModel相关联,使得我们在Model修改的......
  • javaWeb项目-springboot+vue+mysql财务管理系统功能说明介绍
    项目源码资源(点击链接下载):java-springboot+vue财务管理系统源码(项目源码-说明文档)资源-CSDN文库项目关键技术: 1、java技术java页面实质上也是一个HTML页面,只不过它包含了用于产生动态网页内容的JAVA代码,这些JAVA代码可以是JAVABean、SQL语句、RMI对象等。例如一个java......