vue使用動畫實現(xiàn)滾動表格效果

更新時間：2022年04月11日 15:47:00 作者：qq_33203555

這篇文章主要為大家詳細介紹了vue使用動畫實現(xiàn)滾動表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue使用動畫實現(xiàn)滾動表格效果的具體代碼，供大家參考，具體內(nèi)容如下

需求

在一些大屏項目中，需要使用到表格行數(shù)據(jù)滾動。本文介紹在vue項目中使用動畫實現(xiàn)滾動表格。

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%">核心企業(yè)</div>
? ? ? <div class="table-cell" style="width: 15%">發(fā)行狀態(tài)</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>

通過動畫動態(tài)改變表格的位置來達到移動的效果。把數(shù)據(jù)的一半拼接在原數(shù)據(jù)上作為滾動數(shù)據(jù)，達到銜接的效果。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: