用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-12 22:00:32 浏览: 42
可以使用以下代码实现:
```html
<template>
<div class="container">
<div class="list" ref="list">
<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' }
],
timer: null
}
},
mounted() {
this.startCarousel()
},
methods: {
startCarousel() {
const list = this.$refs.list
let index = 0
let offset = 0
const interval = 5000 // 轮播间隔时间
const speed = 600 // 轮播速度
const height = 200 // 每条数据的高度
const limit = Math.floor(list.clientHeight / height) // 可见的数据条数
const pushData = () => {
this.list.push(
{ name: 'new1', event: 'hhhhh' },
{ name: 'new2', event: 'hhhhh' },
{ name: 'new3', event: 'hhhhh' }
)
}
this.timer = setInterval(() => {
offset -= speed
if (offset < -height) {
index++
offset = 0
if (index >= this.list.length) {
clearInterval(this.timer)
pushData()
this.startCarousel()
return
}
if (index + limit > this.list.length) {
index = this.list.length - limit
}
}
list.style.transform = `translateY(${index * height + offset}px)`
}, interval)
setInterval(() => {
pushData()
}, 10000)
}
}
}
</script>
<style>
.container {
width: 400px;
height: 600px;
overflow: hidden;
position: relative;
}
.list {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.5s ease;
}
.item {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
.name {
font-size: 24px;
font-weight: bold;
padding: 10px;
}
.event {
font-size: 16px;
padding: 10px;
}
</style>
```
在这个代码中,我们使用了一个容器 `container` 来限制轮播图的大小,并设置了 `overflow: hidden` 来隐藏溢出的部分。我们使用了一个列表 `list` 来渲染数据,并设置了每个数据项的高度为 200px。我们使用了一个定时器来实现轮播,每隔 5 秒钟将列表向上移动 600px,当移动到最后一条数据时停止轮播。我们还使用了另一个定时器,每隔 10 秒钟向列表中添加 3 条新数据。
相关推荐
![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)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)