step:1,//数值越大速度滚动越快limitMoveNum: 0,//开始无缝滚动的数据量 this.dataList.lengthhoverStop:true,//是否开启鼠标悬停stopdirection: 1,//0向下 1向上 2向左 3向右openWatch:true,//开启数据实时监控刷新domsingleHeight: 0,//单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1...
打开页面,可以看到浏览器右边出现了默认的滚动条,而且我们添加的div元素也超出了container范围。 解决这个问题的一般方式是在样式里面添加“overflow:auto”属性,再来看一下效果: 改善了许多,但是滚动条的样式却不好改变,于是现在引入hd-scroll组件: 1 <template> 2 3 <hd-scroll> 4 {{ i }} 5 </hd-scroll...
} toDetail方法写在vue-seamless-scroll中的div中可以获取到整个item对象,但是有一个bug就是第一个item点击没有反应,网上说是因为vue-seamless-scroll中间包裹的dom复制渲染,没有带上dom的事件导致,使用事件委托方法解决,所以方法加在了外边,通过e.target获取。publicNotificationOption中还有很多属性可以设置滚动样式,可...
// 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction...
处理鼠标滚动事件: 在组件的方法中定义一个handleScroll方法来处理鼠标滚动事件。这个方法会根据鼠标滚动的方向调整vue-seamless-scroll组件的内部滚动位置。javascript methods: { handleScroll(e) { const vueSeamlessScroll = this.$refs.vueSeamlessScroll; // 改变组件内部 yPos 的值,这样html的translate(0, yPos...
[vue] vue-seamless-scroll 滚动到第二遍的时候不能进行点击的问题,的事件委托(通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素)组件时,循环第一遍可以正常点
左右方向的滚动是否显示控制器按钮，true 的时候 autoPlay 自动变为 false。回调事件 <template> <vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" class="warp"> </vue-seamless-scroll></template> ScrollEnd ScrollEnd: function(){ console.log("ScrollEnd")...
在使用vue-seamless-scroll时候,想要点击某一列/行触发一个事件,发现,前几个可以,后面几个就不行了,不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动) 解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是...
单步运动停止的高度应该为单行数据高度的整数倍,在文章示例中就是高度的整数倍。当设置为整数倍时,列表文字都可以清楚展示看做为无缝滚动,否则就会出现文字展示不全的问题。 单行数据添加点击事件无效 一般情况下我们会把点击事件添加到循环行上,但是由于此组件的原因,点击事件会出现问题。解决方法,给父元素绑定事件,...
当第一个ul中的数据滚动完时(真实数据),第二个ul 部分的click事件不起作用(复制出来的数据),无法实现一些点击这行,弹窗详情信息业务需要功能。 我需要这些数据添加一些点击事件,弹出二级页面及区域切换效果。 解决办法: 方式一: 采用事件委托的方式: 事件委托又叫事件代理,就是利用事件冒泡,只指定一个事件处理程序...