用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 07:04:12 浏览: 32
可以使用以下代码实现:
<template>
<div class="container">
<div class="list-container" ref="listContainer">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="name">{{ item.name }}</div>
<div class="event">{{ 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' }
],
currentIndex: 0,
timer: null
}
},
mounted() {
this.startCarousel()
},
methods: {
startCarousel() {
this.timer = setInterval(() => {
this.currentIndex++
if (this.currentIndex >= this.list.length) {
clearInterval(this.timer)
return
}
this.$refs.listContainer.style.transform = `translateY(-${this.currentIndex * 200}px)`
}, 5000)
setInterval(() => {
this.list.push(
{ name: 'new1', event: 'new event1' },
{ name: 'new2', event: 'new event2' },
{ name: 'new3', event: 'new event3' }
)
}, 10000)
}
}
}
</script>
<style>
.container {
width: 400px;
height: 600px;
overflow: hidden;
}
.list-container {
width: 400px;
height: 1600px;
transition: transform 0.5s;
}
.item {
width: 400px;
height: 200px;
background-color: #ccc;
margin-bottom: 10px;
}
.name {
font-size: 20px;
font-weight: bold;
}
.event {
font-size: 16px;
}
</style>