本文实例为大家分享了vue实现列表无缝滚动效果的具体代码，供大家参考，具体内容如下
1.安装
npm install vue-seamless-scroll --save
2.在需要使用的组件中引入进行配置
import vueSeamlessScroll from "vue-seamless-scroll";
在components中注入
components: { vueSeamlessScroll },
3.使用
<template>
<div class="seamlessRolling" @click="lookClick($event)">
<vue-seamless-scroll :data="msgData" :class-option="classOption">
<ul>
<li v-for="(item, index) in msgData" :key="index">
<span>{{ item.id }}</span>
<span>{{ item.title }}</span>
<span class="handle" :id="item.id" :data-tit="item.title">查看</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
// import引入的组件需要注入到对象中才能使用
components: { vueSeamlessScroll },
data() {
// 这里存放数据
return {
msgData: [
{
id: 1,
name: 1,
title: "无缝滚动001",
},
{
id: 2,
name: 2,
title: "无缝滚动002",
},
{
id: 3,
name: 3,
title: "无缝滚动003",
},
{
id: 4,
name: 4,
title: "无缝滚动004",
},
{
id: 5,
name: 5,
title: "无缝滚动005",
},
],
};
},
// 计算属性 类似于data概念
computed: {
classOption() {
return {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
lookClick(e) {
if (e.target.className == "handle") {
console.log(e.target.id);
console.log(e.target.dataset.tit);
}
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' >
//@import url(); 引入公共css类
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css类
* {
padding: 0;
margin: 0;
}
.seamlessRolling {
margin: 0 auto;
width: 300px;
height: 200px;
border: 1px solid rgb(165, 76, 76);
overflow: hidden;
ul,
li {
list-style: none;
}
li {
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-around;
.handle {
cursor: pointer;
}
}
}
</style>
4.配置项说明
data中的msgData为所需要实现滚动的列表数据,计算属性computeds中classOption为滚动属性的配置
5.可能会遇到的问题
vue-seamless-scroll是通过将要实现滚动的数据复制一遍来实现无缝滚动,当需要给每一条数据绑定事件时,如果直接绑定,复制出的数据无法绑定事件。可以通过事件委托的方式，给列表元素的父元素绑定事件，通过事件对象event,获取到点击元素的类名进行判断其是否为需要的元素,将绑定事件所需的id绑定为按钮id,可以通过event.target.id获取。或者将所要传递的变量绑定为该按钮的自定义属性，如data-tit，通过event.target.dataset.tit获取。
