用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的盒子里,放的顺序是从上到下,且将溢出的部分隐藏,然后做一个从下往上的轮播,速度是每5秒600px,当list中数据轮播完之后,轮播停止,在轮播停止过后如果list当中新加入了数据需要继续轮播
时间: 2023-04-09 11:04:32 浏览: 51
可以使用以下代码实现:
```html
<template>
<div class="container">
<div class="list" :style="{ height: listHeight + 'px' }">
<div class="item" v-for="(item, index) in list" :key="index" :style="{ top: itemTop(index) + 'px' }">
<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' },
{ name: 'csw9', event: 'hhhhh' },
{ name: 'csw10', event: 'hhhhh' },
],
itemHeight: 200,
listHeight: 0,
currentIndex: 0,
timer: null,
};
},
mounted() {
this.listHeight = this.list.length * this.itemHeight;
this.startTimer();
},
methods: {
itemTop(index) {
return (index - this.currentIndex) * this.itemHeight;
},
startTimer() {
this.timer = setInterval(() => {
this.currentIndex++;
if (this.currentIndex >= this.list.length) {
clearInterval(this.timer);
this.timer = null;
}
}, 5000);
},
},
};
</script>
<style scoped>
.container {
width: 400px;
height: 600px;
overflow: hidden;
position: relative;
}
.list {
position: absolute;
left: 0;
top: 0;
width: 100%;
transition: top 0.5s ease-in-out;
}
.item {
width: 100%;
height: 200px;
position: absolute;
left: 0;
overflow: hidden;
}
.name {
font-size: 20px;
font-weight: bold;
}
.event {
font-size: 16px;
color: #666;
}
</style>
```
在这个代码中,我们使用了 Vue.js 的 v-for 指令来渲染列表,使用了 CSS 的 position 和 overflow 属性来实现滚动效果,使用了 setInterval 函数来实现定时器,实现了从下往上的轮播效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)