Vue列表自动滚动+鼠标悬停

半度纳

已于 2023-03-13 19:54:51 修改

阅读量1.7k

点赞数 1

分类专栏： Vue 文章标签： vue 前端 css

于 2023-03-13 19:41:17 首次发布

本文链接：https://blog.csdn.net/Five297/article/details/129503363

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

该文章展示了如何在Vue项目中使用vue-seamless-scroll组件来创建一个无缝滚动的列表效果。通过npm安装，导入组件，配置数据和样式，可以实现列表的自动滚动，且支持鼠标悬停暂停以及自定义滚动速度和方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

Vue列表滚动效果

代码：

第一步进行npm命令安装组件

npm install vue-seamless-scroll --save

第二步在main.js直接导入使用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

第三步在页面中使用

<template>
    <!-- 表头代码已省略 -->
	<div class="seamlessRolling">
		<vue-seamless-scroll :data="msgData" :class-option="classOption">
			<el-row class="list-row" v-for="(item, index) in msgData" :key="index">
				<el-col :span="3">
					<p class="circle-nos">{{index+1}}</p>
				</el-col>
				<el-col :span="6">
					<p class="digit">{{item.carNo}}</p>
				</el-col>
				<el-col :span="4">
					<p class="digit">{{item.mount}}</p>
				</el-col>
				<el-col :span="6">
					<p class="digit">{{item.title}}</p>
				</el-col>
				<el-col :span="4">
					<p class="digit">{{item.title1}}</p>
				</el-col>			
			</el-row>
		</vue-seamless-scroll>
	</div>
</template>

<script>
    import vueSeamlessScroll from "vue-seamless-scroll";
    
	export default {
        components: {
			vueSeamlessScroll,
		},
        data(){
           retrun{
               msgData: [{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
					{
						carNo: '牡丹区',
						mount: '31',
						title: "209",
						title1: "89.3%",
					},
				],
           }
        }
     	// 计算属性 类似于data概念
		computed: {
			classOption() {
				return {
					step: 0.2, // 数值越大速度滚动越快
					limitMoveNum: 1, // 开始无缝滚动的数据量 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)
				};
			},
		},   
    }
</script>

<style>
	.seamlessRolling {
		margin: 0 auto;
		width: 400px;//列表滚动的宽度
		height: 280px;//列表滚动的高度
		overflow: hidden;
	}
</style>