表格或者信息展示时上下循环播放功能实现
第一步:下载插件:使用的插件是vue-seamless-scroll
npm install vue-seamless-scroll --save
第二步:引入插件
import vueSeamless from "vue-seamless-scroll";
第三步:使用
export default {
components: {
vueSeamless,
},
}
<template>
<div class="test">
<div class="content-bottom">
<vue-seamless
:data="scrollData"
class="auto-scorll-table"
:class-option="classOption"
>
<div
class="energy-box"
v-for="(item, index) in executeInfos"
:key="index"
>
<div class="energy-box-top">
<p style="margin-right: 10px">【{{ item.alarmTypeName }}】</p>
<p>{{ item.alarmTime }}</p>
</div>
<p>
<span style="margin-right: 10px">【{{ item.companyName }}】</span>
<span>{{ item.message }}</span>
</p>
</div>
</vue-seamless>
</div>
</div>
</template>
具体代码,如下所示:
<template>
<div class="test">
<div class="content-bottom">
<vue-seamless
:data="scrollData"
class="auto-scorll-table"
:class-option="classOption"
>
<div
class="energy-box"
v-for="(item, index) in executeInfos"
:key="index"
>
<div class="energy-box-top">
<p style="margin-right: 10px">【{{ item.alarmTypeName }}】</p>
<p>{{ item.alarmTime }}</p>
</div>
<p>
<span style="margin-right: 10px">【{{ item.companyName }}】</span>
<span>{{ item.message }}</span>
</p>
</div>
</vue-seamless>
</div>
</div>
</template>
<script>
import vueSeamless from "vue-seamless-scroll";
export default {
data() {
return {
scrollData: [
{
alarmTypeName: "向上",
alarmTime: "2022-09-11",
companyName: "浙达能源有限公司",
message: "测试1",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-12",
companyName: "浙达能源有限公司",
message: "测试2",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-13",
companyName: "浙达能源有限公司",
message: "测试3",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-14",
companyName: "浙达能源有限公司",
message: "测试4",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-15",
companyName: "浙达能源有限公司",
message: "测试5",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-16",
companyName: "浙达能源有限公司",
message: "测试6",
},
],
executeInfos: [
{
alarmTypeName: "向上",
alarmTime: "2022-09-11",
companyName: "浙达能源有限公司",
message: "测试1",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-12",
companyName: "浙达能源有限公司",
message: "测试2",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-13",
companyName: "浙达能源有限公司",
message: "测试3",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-14",
companyName: "浙达能源有限公司",
message: "测试4",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-15",
companyName: "浙达能源有限公司",
message: "测试5",
},
{
alarmTypeName: "向上",
alarmTime: "2022-09-16",
companyName: "浙达能源有限公司",
message: "测试6",
},
],
};
},
components: {
vueSeamless,
},
computed: {
classOption() {
return {
step: 0.2, // 数值越大速度滚动越快
// limitMoveNum: this.scrollData.length == 0 ? 5 : this.scrollData.length, // 开始无缝滚动的数据量 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 lang='scss' scoped>
.test {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
.content-bottom {
width: 300px;
height: 300px;
padding: 10px 0;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #c9dbed;
.auto-scorll-table {
width: 100%;
height: 100%;
overflow: hidden;
.energy-box {
margin-bottom: 8px;
.energy-box-top {
display: flex;
}
p {
font-family: HarmonyOS_Sans_SC;
font-size: 12px;
color: #c9dbed;
letter-spacing: 0;
line-height: 22px;
}
}
}
}
}
</style>