在Vue中使用vue-seamless-scroll组件时,通常这个组件主要用于实现无缝滚动效果,它本身可能并不直接支持点击事件,因为其主要关注的是滚动行为的实现,而不是内容的交互。然而,你仍然可以通过几种方式在滚动的内容上添加点击事件。 1. 组件内容添加点击事件 由于vue-seamless-scroll主要是包裹内容的容器,你可以直接在它包裹...
使用Vue的事件绑定方式@click="getfunc(index)"其中 getfunc 是事件名称,index是索引 接下来就可以在getfunc(index)事件中去用这个下标做你想做的事情了(因为下标从0开始,如果想要知道具体是第几个数据需要+1) 详解部分2 点击后添加css类 点击其他li元素取消(三元运算符方式) 我这里用的样式 首先写好激活类的...
click: 点击一次; 当鼠标点击,触发事件 dblclick: 双击;当鼠标双击,触发事件 focus: 获取焦点; 当得到了光标,触发事件 blur: 失去焦点; 当失去了光标,触发事件 mouseover:鼠标移至; 鼠标移至某标签上方,触发事件 mouserout:鼠标移出; 鼠标移出某标签上方,触发事件 keyup:键盘按下; 键盘按下,触发事件 对于触发...
解决:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行 具体实现 <vue-seamless-scroll class="warp" v-if="companyList.length > 0" :data="companyList" :class-option="classOption" > ...
自己写点击事件在滚动的项里面会自己复制一个dom出来,但是事件沒有复制出来。 解決方法: 我查看了很多文档,都是使用的事件代理;在自己需要点击的项中加一个class,在点击事件中用到。 上代码: <vueSeamless:data="scrollContent":class-option="option"ref="seamlessScroll">...<el-buttontype="text">查看记录<...
在使用vue-seamless-scroll时候,想要点击某一列/行触发一个事件,发现,前几个可以,后面几个就不行了,不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动) 解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是...
vue-seamless-scroll的使用与注意事项如下: 1.点击事件无响应。解决办法:在父容器上添加click事件监听;在循环列表(行)上添加自定义的data-*属性;在循环列表(行)上添加自定义的class属性;在click事件中获取自定义的data-*属性值。 2.循环列表如何无缝滚动。解决办法:给循环列表中的行设置固定的高和行高;父容器设置...
在vue-seamless-scroll增加key属性,避免组件复用,每次数据请求时刷新key。key可以定义为当前时间(new Date().getTime())。 参考链接 vue-seamless-scroll官方文档 vue-seamless-scroll插件在线演示文档 vue-seamless-scroll的使用以及实例
【vue】 vue-seamless-scroll 无缝滚动依赖 最近vue2项目中有使用文图和文字的无缝滚动场景,从网上看到有些挺有用的,特摘抄分享一下。 1.安装依赖 npm install vue-seamless-scroll --save 2.注册 全局注册 import scroll from 'vue-seamless-scroll'Vue.use(scroll)...
解决办法:在vue-seamless-scroll外的父元素上添加点击事件,利用js的事件委托(通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素) 使用(data-XXX)自定义属性 可以给每一层都加上 <vue-seamless-scroll :data="equipmentList" :class-option="classOption"...