79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||
|
|
|
||
|
|
const list = ref([
|
||
|
|
{
|
||
|
|
a: '领先',
|
||
|
|
b: '现场竞价',
|
||
|
|
c: '10:12:12',
|
||
|
|
d: 'RMB5,500',
|
||
|
|
e: '我'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
// 记录定时器 ID
|
||
|
|
let intervalId = null;
|
||
|
|
|
||
|
|
const addItem = () => {
|
||
|
|
list.value.push({
|
||
|
|
a: '领先',
|
||
|
|
b: '现场竞价',
|
||
|
|
c: '10:12:12',
|
||
|
|
d: 'RMB5,500',
|
||
|
|
e: ''
|
||
|
|
});
|
||
|
|
nextTick(() => {
|
||
|
|
scrollToBottom();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const scrollToBottom = () => {
|
||
|
|
const container = document.getElementById('list-container');
|
||
|
|
if (container) {
|
||
|
|
setTimeout(() => {
|
||
|
|
container.scrollTop = container.scrollHeight;
|
||
|
|
}, 100); // 延迟以确保动画开始
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// 每秒添加一条数据
|
||
|
|
/* intervalId = setInterval(() => {
|
||
|
|
addItem();
|
||
|
|
}, 1000);*/
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
// 清理定时器
|
||
|
|
if (intervalId) {
|
||
|
|
clearInterval(intervalId);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
id="list-container"
|
||
|
|
class="w-344px h-86px overflow-y-auto bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px flex flex-col justify-between"
|
||
|
|
>
|
||
|
|
<transition-group name="list" tag="div">
|
||
|
|
<div v-for="(item, index) in list" :key="index" class="flex flex-shrink-0 h-25px">
|
||
|
|
<div class="flex-grow-1 text-center">{{ item.a }}</div>
|
||
|
|
<div class="flex-grow-1 text-center">{{ item.b }}</div>
|
||
|
|
<div class="flex-grow-1 text-center">{{ item.c }}</div>
|
||
|
|
<div class="flex-grow-1 text-center">{{ item.d }}</div>
|
||
|
|
<div class="flex-grow-1 text-center">{{ item.e }}</div>
|
||
|
|
</div>
|
||
|
|
</transition-group>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.list-enter-active, .list-leave-active {
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
}
|
||
|
|
.list-enter-from, .list-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
</style>
|