liveh5-nuxt/app/pages/liveRoom/components/Broadcast/index.vue

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

const list = ref([
  {
    a: '领先',
    b: '现场竞价',
    c: '10:12:12',
    d: 'RMB5,500',
    e: '我'
  }
]);

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>