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>

通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据，达到衔接的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。