vue使用动画实现滚动表格效果
作者：qq_33203555
这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用动画实现滚动表格效果的具体代码，供大家参考，具体内容如下
需求
在一些大屏项目中，需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。
vue代码如下
<template>
<div style="cursor: default;margin:9px 10px 18px">
<div class="table-header table-row">
<div class="table-cell" style="width: 25%">计划名称</div>
<div class="table-cell" style="width: 40%">核心企业</div>
<div class="table-cell" style="width: 15%">发行状态</div>
<div class="table-cell" style="width: 20%;text-align:right">金额(元)</div>
</div>
<div class="table-body">
<div :class="{ 'scroll-wrap': getPlayData.length > 0 }">
<div
class="table-row"
:class="{ hasBgc: index % 2 === 0 }"
v-for="(item, index) in getPlayData"
:key="index"
:ref="'row_' + index"
>
<div class="table-cell" style="width: 25%" :title="item.productName">
{{ item.productName }}
</div>
<div class="table-cell" style="width: 40%" :title="item.coreName">{{ item.coreName }}</div>
<div class="table-cell" style="width: 15%" :title="item.publish">{{ item.publish }}</div>
<div class="table-cell" style="width: 20%;text-align:right" :title="item.publishAmount">
{{ item.publishAmount }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
initMt: 0,
// getPlayData:[],
visible: true,
stop: false,
};
},
methods: {
play() {
const row = this.$refs["row_0"][0];
setTimeout(() => {
this.visible = false;
this.$nextTick(() => {
this.initMt++;
if (this.initMt === this.data.length) {
this.initMt = 0;
}
this.visible = true;
});
this.play();
}, 2000);
},
},
watch: {
},
computed: {
getPlayData() {
return this.data.concat(this.data.slice(0, 4));
},
},
mounted() {
// this.play();
},
};
</script>
<style lang="scss" scoped>
$cellHeight: 35px;
.table-row {
display: flex;
line-height: 35px;
height: 35px;
transition: all 0.3s;
border-bottom: 1px solid rgba(63, 88, 114, 1);
}
.table-header {
color: rgba(87, 150, 190, 1);
}
.table-cell {
text-align: left;
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
// .hasBgc {
// background: rgb(0, 59, 81);
// }
.hidden-row {
height: 0 !important;
line-height: 0 !important;
display: none !important;
}
.table-body {
height: 142px;
overflow-y: hidden;
.table-row {
color: #fff;
}
}
.scroll-wrap {
animation: scroll 18s linear infinite;
position: relative;
}
.scroll-wrap:hover {
animation-play-state: paused;
}
@keyframes scroll {
from {
top: 0;
}
to {
top: -8 * $cellHeight;
}
}
</style>通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据，达到衔接的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。