详解vue 自定义marquee无缝滚动组件

先上效果图：

（1） 看起来可能有点卡顿，但是实际上页面上看起来挺顺畅的。

（2） 思路就是获取每一个列表的宽度，设置定时器移动列表，当移动的距离达到一个列表的宽度的时候，把这个距离放到数组的最后。这样就能达成无缝循环滚动了。

 大致的情况就是下面这样：

 

接下来就是代码的实现：

index.vue 引入组件

marquee.vue 组件页面

（1） 添加一个获取margin的方法，是为了保证如果是使用 rem em 等单位时，margin值不会出现偏差的情况

（2） 如果引入组件的页面中，send-val的值是异步请求的。那么，在marquee.vue组件页面，多数情况会获取不了 refs 。这时候我自己的解决方法是：

 表示只有当 send 不为空的时候才渲染该组件，不过这种情况会导致如果 请求响应太慢，组件会一直渲染不出来，就可能会影响布局。

（3） 如果不想每次都去设置transform，那么可以把transform放到该元素上，然后修改data中的数据就行了，比如：

// 然后在 js 中把 每次移动的值，赋值给cssStyle就行了。不过我感觉这种没什么区别

 如果想实现，上下无缝滚动，这种效果。思路和左右无缝滚动一样，基本上只需要把 transform 改成 Y轴移动 ，每个列表的宽度改成高度就行了。

不清楚这种方式实现是否会有什么问题，FPS一直保持在 接近60左右。暂时没发现什么缺点。。。

以上所述是小编给大家介绍的vue自定义marquee无缝滚动组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！