vue-seamless-scroll组件在复制DOM元素进行滚动时,并不会复制绑定在原始DOM元素上的事件监听器。因此,常见的解决方案是使用事件委托,将点击事件绑定到父元素上,而不是直接绑定到动态生成的DOM元素上。 检查点击事件绑定: 确保你的点击事件是绑定在正确的元素上。由于vue-seamless-scroll会复制DOM元素,因此直接将事件绑定...
问题:使用vue-seamless-scroll组件时,循环第一遍可以正常点击,之后不能够正常点击,触发不了点击事件. 解决办法:在vue-seamless-scroll外的父元素上添加点击事件,利用js的事件委托(通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素) 使用(data-XXX)自定义属性 可以给每一层都加上 <...
在使用vue-seamless-scroll这个组件的时候发现存在一个问题: 自己写点击事件在滚动的项里面会自己复制一个dom出来,但是事件沒有复制出来。 解決方法: 我查看了很多文档,都是使用的事件代理;在自己需要点击的项中加一个class,在点击事件中用到。 上代码: <vueSeamless:data="scrollContent":class-option="option"ref...
在使用vue-seamless-scroll时候,想要点击某一列/行触发一个事件,发现,前几个可以,后面几个就不行了,不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动) 解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是...
引言:做可视化地图项目,使用vue-seamless-scroll实现表格数据自动滚动,有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式, 无限滚动原理:无限滚动的原理就是把之前的遍历的内容复制一份,滚动这两部分内容,达到无缝滚动效果。(一般数据量比较多有这种效果,数据量比较少,我就不让他滚动了)。
当第一部分中的数据未滚动完时,第二部分的click事件不起作用,无法实现功能 3.解决办法 原因:第二部分无法操作和js的运行机制有关,需要重新绑定事件 解决:给外层div加点击事件,通过event.target获取到点击的dom元素 4.例子 1 2 3 4 5 6 7 8 9
vue-seamless-scroll的使用与注意事项如下: 1.点击事件无响应。解决办法:在父容器上添加click事件监听;在循环列表(行)上添加自定义的data-*属性;在循环列表(行)上添加自定义的class属性;在click事件中获取自定义的data-*属性值。 2.循环列表如何无缝滚动。解决办法:给循环列表中的行设置固定的高和行高;父容器设置...
实际页面渲染后会出现点击某些span没有执行事件的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的,而JS的onclick只检测页面...
npm install vue-seamless-scroll --save 二、在main.js页面引用 import scroll from "vue-seamless-scroll"; Vue.use(scroll); 如下图 image.png 三、代码如下 <template><!-- 表头 -->序号样品名称规格型号取样日期推送功能室推送人推送时间接应时间<!-- 滚动部分 --><vue-seamless-scroll:data="trapDail...