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>
通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据,达到衔接的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)