你可以
使用以下代码实现：
```html
<template>
<div class="container" style="width: 400px; height: 600px; overflow: hidden;">
<div class="list" style="position: relative; top: 0;">
<div class="item" v-for="(item, index) in list" :key="index" style="width: 400px; height: 200px;">
<p>{{ item.name }}</p>
<p>{{ item.event }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: 'csw1', event: 'hhhhh' },
{ name: 'csw2', event: 'hhhhh' },
{ name: 'csw3', event: 'hhhhh' },
{ name: 'csw4', event: 'hhhhh' },
{ name: 'csw5', event: 'hhhhh' },
{ name: 'csw6', event: 'hhhhh' },
{ name: 'csw7', event: 'hhhhh' },
{ name: 'csw8', event: 'hhhhh' },
{ name: 'csw9', event: 'hhhhh' },
{ name: 'csw10', event: 'hhhhh' },
],
currentIndex: 0,
};
},
mounted() {
setInterval(() => {
this.currentIndex++;
if (this.currentIndex >= this.list.length) {
this.currentIndex = 0;
}
this.scrollList();
}, 5000);
setInterval(() => {
const newList = [];
for (let i = 0; i < 10; i++) {
newList.push({ name: `new${i}`, event: 'new event' });
}
this.list.
splice(this.currentIndex, 10, ...newList);
}, 60000);
},
methods: {
scrollList() {
const list = this.$el.querySelector('.list');
const itemHeight = 200;
const top = -this.currentIndex * itemHeight;
list.style.top = `${top}px`;
},
},
};
</script>
```
在这个代码中，我们
使用了一个容器 `container` 来限制显示区域的大小，并将溢出的部分隐藏。我们
使用了一个列表 `list` 来存储数据，并
使用 `v-for` 指令将数据
渲染到页面上。每个数据都被放在一个宽400px高200px的盒子里。我们
使用了一个定时器来实现从下往上的轮播，每5秒滚动600px，并且每过60秒
会添加十条新数据。我们
使用了一个 `currentIndex` 变量来
记录当前显示的数据的索引，以便在定时器中更新显示的数据。我们
使用了一个 `scrollList` 方法来更新列表的位置。
扫一扫
4186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
