vue怎么使用动画实现滚动表格效果

这篇文章主要介绍“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怎么使用动画实现滚动表格效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！