vue实现列表无缝滚动效果

本文实例为大家分享了vue实现列表无缝滚动效果的具体代码，供大家参考，具体内容如下

1.安装

npm install vue-seamless-scroll --save

2.在需要使用的组件中引入进行配置

import vueSeamlessScroll from "vue-seamless-scroll";

在components中注入

components: { vueSeamlessScroll },

3.使用

4.配置项说明

data中的msgData为所需要实现滚动的列表数据,计算属性computeds中classOption为滚动属性的配置

5.可能会遇到的问题

vue-seamless-scroll是通过将要实现滚动的数据复制一遍来实现无缝滚动,当需要给每一条数据绑定事件时,如果直接绑定,复制出的数据无法绑定事件。可以通过事件委托的方式，给列表元素的父元素绑定事件，通过事件对象event,获取到点击元素的类名进行判断其是否为需要的元素,将绑定事件所需的id绑定为按钮id,可以通过event.target.id获取。或者将所要传递的变量绑定为该按钮的自定义属性，如data-tit，通过event.target.dataset.tit获取。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。