<template>
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData" :key="itemx">{ { itemx }}</th>
</tr>
</table>
<div ref="moocBox" class="wrapper2">
<table :class="{ marquee_top: animate }">
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
<td v-for="itemz in itemy" :key="itemz">{ { itemz }}</td>
</tr>
<tr v-for="itemy in listData" class="rollData" ref="con2" :key="itemy">
<td v-for="itemz in itemy" :key="itemz">{ { itemz }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "Profile",
data() {
return {
animate: false,
liData: ["重点品类", "销售金额", "年周比", "达成率"],
listData: [
["FM", "53.647", "-33.76", "86.15%"],
["A", "53.647", "-33.76", "86.15%"],
["B", "53.647", "-33.76", "86.15%"],
["C", "53.647", "-33.76", "86.15%"],
["D", "53.647", "-33.76", "86.15%"],
["E", "53.647", "-33.76", "86.15%"],
["F", "53.647", "-33.76", "86.15%"],
["G111", "53.647", "-33.76", "86.15%"],
],
speed: 50,
myScroll: null,
iliHeight: 26,
time: null,
delay: 20,
};
},
methods: {
//滚动
scrollUp() {
this.$refs.moocBox.scrollTop++;
// console.log(this.$refs.moocBox);
if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
//判断条件是否达到临界
this.$refs.moocBox.scrollTop = 0;
} else {
this.$refs.moocBox.scrollTop++;
}
}, // 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
}, //鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(
() => {
this.$refs.moocBox.scrollTop++;
this.scrollUp();
},
this.speed
);
},
},
components: {},
computed: {},
created() {},
mounted() {
this.myScroll = setInterval(() => {
this.$refs.moocBox.scrollTop++;
this.scrollUp();
}, this.speed);
},
activated() {},
deactivated() {},
beforeDestoryed() {
clearInterval(myScroll);
this.myScroll = null;
},
};
</script>
<style scoped>
.wrapper {
overflow: hidden;
height: 220px;
}
.wrapper2 {
height: 180px;
overflow: hidden;
}
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background-color: rgb(2, 25, 80);
width: 100%;
color: rgb(141, 35, 35);
}
tabletr {
transition: all 2s ease .3s;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
th {
padding: 5px 10px;
width: 25%;
}
td {
padding: 4px 10px;
width: 25%;
}
table th {
text-align: center;
}
table tr td {
width: 25%;
text-align: center;
}
.rollData {
font-size: 16px;
}
</style>
实现table的无限滚动
猜你喜欢
转载自blog.csdn.net/qq_38687592/article/details/128221921
今日推荐
周排行