用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' } ],每条数据放在宽400px高200px的盒子里,放的顺序是从上到下,且将溢出的部分隐藏,然后做一个从下往上的轮播,速度是每2秒500px,当list中数据轮播完之后,轮播停止,在轮播停止后过了10s往list当中push十条新数据过后继续轮播
时间: 2023-04-10 16:02:52 浏览: 28
可以使用以下代码实现:
<template>
<div class="container" style="width: 400px; height: 600px; overflow: hidden;">
<div class="list" style="height: 1200px; position: relative; top: 0; transition: top 2s;">
<div v-for="(item, index) in list" :key="index" class="item" style="width: 400px; height: 200px;">
<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' }
],
timer: null
}
},
mounted() {
this.startCarousel()
},
methods: {
startCarousel() {
this.timer = setInterval(() => {
const list = this.list.slice()
const item = list.shift()
list.push(item)
this.list = list
const container = document.querySelector('.container')
const listHeight = container.querySelector('.list').offsetHeight
const itemHeight = container.querySelector('.item').offsetHeight
const maxTop = listHeight - itemHeight * 6
let top = parseInt(container.querySelector('.list').style.top) || 0
top -= 200
if (top < -maxTop) {
clearInterval(this.timer)
setTimeout(() => {
this.list.push(
{ name: 'csw7', event: 'hhhhh' },
{ name: 'csw8', event: 'hhhhh' },
{ name: 'csw9', event: 'hhhhh' },
{ name: 'csw10', event: 'hhhhh' },
{ name: 'csw11', event: 'hhhhh' },
{ name: 'csw12', event: 'hhhhh' },
{ name: 'csw13', event: 'hhhhh' },
{ name: 'csw14', event: 'hhhhh' },
{ name: 'csw15', event: 'hhhhh' },
{ name: 'csw16', event: 'hhhhh' }
)
this.startCarousel()
}, 10000)
} else {
container.querySelector('.list').style.top = `${top}px`
}
}, 2000)
}
}
}
</script>
<style>
.container {
position: relative;
}
.list {
position: absolute;
left: 0;
top: 0;
}
.item {
position: absolute;
left: 0;
top: 0;
}
</style>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)