<template>
<div class="div-table">
<div
class="div-table-header"
:style="{ height: height + 'vh', lineHeight: height + 'vh' }"
>
<span>序号</span>
<span>姓名</span>
<span>年龄</span>
</div>
<div class="div-table-body" style="height: 25vh">
<div
v-for="(item, index) in list"
:key="index"
class="content"
:class="{ active: index % 2 }"
:style="{
height: height + 'vh',
lineHeight: height + 'vh',
transform: 'translateY(' + topWidth + 'vh)',
}"
>
<span>{{ index }}</span>
<span>{{ item.name }}</span>
<span>{{ item.age }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
height: 5,
timer: null,
topWidth: 0,
list: [
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
{
name: "二驴",
age: 48,
jiao: 60,
},
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
// {
// name: "二驴",
// age: 48,
// jiao: 60,
// },
],
};
},
props: {},
methods: {
getTimer() {
if (this.list.length > 10) {
this.timer = setInterval(() => {
this.index++;
this.topWidth = -this.index * this.height;
if (this.index == this.list.length - this.height) {
this.index = 0;
}
}, 2000);
} else {
this.timer = null;
}
},
},
mounted() {
this.getTimer();
},
beforeDestroy() {
this.timer = null;
},
};
</script>
<style lang="stylus" scoped>
.div-table {
// height: 400px;
width: 600px;
margin: 30px auto;
border: 1px solid #090;
background: #fff;
.div-table-header {
display: flex;
text-align: center;
span {
flex: 1;
}
}
.div-table-body {
// border: 2px solid #f00;
overflow: hidden;
.content {
display: flex;
text-align: center;
transition: all 2s linear;
background: #1000999e;
span {
flex: 1;
}
}
.active {
background: #6e269c9e;
}
}
}
</style>
