这篇文章主要介绍“vue怎么使用动画实现滚动表格效果”，在日常操作中，相信很多人在vue怎么使用动画实现滚动表格效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么使用动画实现滚动表格效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
在一些大屏项目中，需要使用到表格行数据滚动。
vue代码如下
计算
安全
数据库
网络和加速
企业服务
<template>
<div >
<div class="table-header table-row">
<div class="table-cell" >计划名称</div>
<div class="table-cell" >核心企业</div>
<div class="table-cell" >发行状态</div>
<div class="table-cell" >金额(元)</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" :title="item.productName">
{{ item.productName }}
</div>
<div class="table-cell" :title="item.coreName">{{ item.coreName }}</div>
<div class="table-cell" :title="item.publish">{{ item.publish }}</div>
<div class="table-cell" :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>通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据，达到衔接的效果。
到此，关于“vue怎么使用动画实现滚动表格效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
