用vue2在宽400px高600px的div里面用v-for渲染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' } ],每条数据放在宽400px高200px的盒子里,放的顺序是从上到下,且将溢出的部分隐藏,然后做一个从下往上的轮播,速度是每5秒600px,并且每过10s会通过定时器向list当中push3条数据,当轮播到最后一条数据的时候轮播结束,当轮播到最后一条且list当中更新了新数据的时候从轮播图底部继续轮播
时间: 2023-04-10 19:03:58 浏览: 47
可以使用以下代码实现:
```html
<template>
<div class="container" style="width: 400px; height: 600px; overflow: hidden;">
<div class="list" style="height: 1600px; position: relative; top: 0px; transition: top 1s;">
<div v-for="(item, index) in list" :key="index" class="item" style="width: 400px; height: 200px; position: absolute; top: {{index*200}}px;">
<div>{{item.name}}</div>
<div>{{item.event}}</div>
</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' }
]
}
},
mounted() {
setInterval(() => {
this.list.push(
{ name: 'new1', event: 'new event1' },
{ name: 'new2', event: 'new event2' },
{ name: 'new3', event: 'new event3' }
)
}, 10000)
setInterval(() => {
let listHeight = this.list.length * 200
let containerHeight = 600
let top = parseInt(this.$el.querySelector('.list').style.top)
if (top <= -(listHeight - containerHeight)) {
top = 0
}
this.$el.querySelector('.list').style.top = (top - 200) + 'px'
}, 5000)
}
}
</script>
```
这段代码使用了 Vue2 的模板语法,通过 v-for 指令渲染了列表数据,并将每条数据放在一个宽400px高200px的盒子里。然后使用了定时器来定时向列表中添加新数据,并使用另一个定时器来实现从下往上的轮播效果。其中,通过设置容器的高度和溢出隐藏来实现了只显示一定数量的数据。