可视化大屏-实现自动滚动

一、背景：可视化大屏通常需要用到自动滚动的效果，本文主要采用的是vue-seamless-scroll组件来实现（可参考官方文档）
二、实现效果：

三、代码实现：
解题思路：
1.先安装依赖包

npm install vue-seamless-scroll --save
或
yarn add vue-seamless-scroll
或
<script src="vue-seamless-scroll.min.js"></script>

2.完整源码实现如下：

<template><div class="mb-1" v-if="props.title"><span class="eq-blue-button">{{ props.title }}</span></div><vue3-seamless-scrollclass="scroll":class="heightClass":list="list" :hover="scrollOption.hover":step="scrollOption.setp":direction="scrollOption.direction":limitScrollNum="scrollOption.limitScrollNum"><!-- <slot name="slotScroll" :list="list"></slot> 注：如果想要封装成组件可以使用插槽方式 --><!-- 下面代码为具体业务的页面显示代码--><div class="eq-list" v-for="(item, index) in list" :key="index"><div class="eq-tr">{{ item.name }}</div><divclass="eq-tr2 flex" :class="[isShowUnit? 'justify-between': 'justify-center']":style="{color: textColor,'font-Weight': props.fontWeight,'font-size': props.fontSize,}"><span>{{ item.value }}</span><span>{{ item.unit }}</span></div></div></vue3-seamless-scroll>
</template>
<script lang="ts" setup>
import { ref,computed } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const props = defineProps({list: {  //数据源  自动滚动 必传 type: Array,default: () => [],},scrollOptions: {  // 滚动的配置 比如 滚动方向、滚动达到什么数量开始滚动等type: Object,default: () => ({}),},heightClass: { // 滚动的高度 可以自己写 比如换成 .名称{height: '对应的高度'}type: String,default: "heightMidel"},title: {type: String,default: '',},textColor: {type: String,default: '#3cc094',},fontSize: {type: String,default: '',},fontWeight: {type: String,default: '500',},key: {type: String,default: '0',},isShowUnit: {type: Boolean,default: false,}
});
const scrollOption = ref({hover: true,  // 鼠标经过触发的事件 默认是truesetp: 0.3, // 数值越大速度滚动越快limitScrollNum: 8,  // 开始无缝滚动的数据量 默认5hoverStop: true, // 是否开启鼠标悬停stopdirection: 'up', // down向下 up向上 left 向左 right向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 10, //单步运动停止的高度(默认值0是无缝不停止的滚动)...props.scrollOptions
})
</script>
<style lang="less" scoped>
.scroll {overflow: hidden;
}
.heightMidel {height: 36vh;
}
.heightLarge {height: 51vh;
}
.eq-box {color: #fff;margin: 0.6rem 0.3rem;
}
.eq-border-box {border: 1px solid #135daf;padding-right: 4px;
}
.eq-center {margin: 0px 5px;border: 1px solid #135daf;
}
.eq-blue-button {background: #2047b8;padding: 4px 16px;font-size: 0.8rem;font-weight: 500;
}
.eq-list {display: flex;border: 1px solid #1857f133;width: 100%;
}
.eq-tr {width: 60%;padding: 5px 8px;border-right: 1px solid #1857f133;font-size: 0.8rem;text-align: center;
}
.eq-tr2 {width: 40%;padding: 5px 8px;font-size: 0.8rem;
}
.text-green {color: #3de5ad;
}
.border-left {border-left: 1px solid #1857f133;
}</style>