用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' }, { name: 'csw9', event: 'hhhhh' }, { name: 'csw10', event: 'hhhhh' },, ],每条数据放在宽400px高200px的盒子里,放的顺序是从上到下,且将溢出的部分隐藏,然后做一个从下往上的轮播,速度是每2秒500px,当list中数据轮播完之后,轮播停止,在轮播停止后过了10s往list当中push十条新数据过后继续轮播
时间: 2023-04-10 15:02:29 浏览: 72
可以使用以下代码实现:
```html
<template>
<div class="container" style="width: 400px; height: 600px; overflow: hidden;">
<div class="list" style="height: 2000px; position: relative; top: 0;">
<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' },
{ name: 'csw9', event: 'hhhhh' },
{ name: 'csw10', event: 'hhhhh' },
],
timer: null,
currentIndex: 0,
};
},
mounted() {
this.startCarousel();
},
methods: {
startCarousel() {
this.timer = setInterval(() => {
this.currentIndex += 1;
if (this.currentIndex >= this.list.length) {
clearInterval(this.timer);
setTimeout(() => {
this.addNewData();
this.startCarousel();
}, 10000);
} else {
this.moveList();
}
}, 2000);
},
moveList() {
const list = document.querySelector('.list');
list.style.top = `-${this.currentIndex * 200}px`;
},
addNewData() {
const newData = [];
for (let i = 11; i <= 20; i++) {
newData.push({ name: `csw${i}`, event: 'hhhhh' });
}
this.list.push(...newData);
},
},
};
</script>
```
这个代码使用了 Vue2 的模板语法和组件生命周期函数。在 `data` 中定义了 `list` 数组,存储了需要渲染的数据。在 `mounted` 生命周期函数中调用了 `startCarousel` 方法,开始轮播。
`startCarousel` 方法使用了 `setInterval` 定时器,每隔 2 秒钟将 `currentIndex` 加 1,然后调用 `moveList` 方法,将列表向上移动。当 `currentIndex` 大于等于 `list` 的长度时,清除定时器,过 10 秒钟后调用 `addNewData` 方法添加新的数据,然后重新开始轮播。
`moveList` 方法使用了 `querySelector` 获取了列表元素,然后将其向上移动。
`addNewData` 方法使用了 `push` 方法向 `list` 数组中添加新的数据。
在模板中,使用了 `v-for` 指令渲染了 `list` 数组中的每一项,将其放在宽 400px 高 200px 的盒子中。使用了 `position: absolute` 将每个盒子定位在正确的位置。使用了 `overflow: hidden` 将溢出的部分隐藏。
阅读全文