vue自动滚动图片加数据
时间: 2024-06-08 19:11:20 浏览: 16
你可以使用Vue的`v-for`指令来循环渲染图片和数据,并使用CSS3动画和JavaScript实现自动滚动效果。以下是一个简单的示例代码:
```html
<template>
<div class="slider">
<ul class="slider-list" ref="sliderList">
<li v-for="(item, index) in dataList" :key="index" class="slider-item">
<img :src="item.imgSrc" alt="">
<div class="slider-text">{{ item.text }}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ imgSrc: 'https://example.com/image1.jpg', text: '第一张图片' },
{ imgSrc: 'https://example.com/image2.jpg', text: '第二张图片' },
{ imgSrc: 'https://example.com/image3.jpg', text: '第三张图片' }
]
}
},
mounted() {
this.autoScroll()
},
methods: {
autoScroll() {
setInterval(() => {
const sliderList = this.$refs.sliderList
const firstItem = sliderList.children[0]
sliderList.appendChild(firstItem.cloneNode(true))
sliderList.style.transition = 'transform 0.5s ease-in-out'
sliderList.style.transform = 'translateY(-100%)'
setTimeout(() => {
sliderList.style.transition = 'none'
sliderList.style.transform = 'translateY(0)'
sliderList.removeChild(firstItem)
}, 500)
}, 3000)
}
}
}
</script>
<style scoped>
.slider {
width: 100%;
overflow: hidden;
}
.slider-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.5s ease-in-out;
}
.slider-item {
display: flex;
align-items: center;
height: 200px;
background-color: #ddd;
}
.slider-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-text {
margin-left: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
</style>
```
在上面的代码中,`dataList`数组包含了要展示的图片和数据,`mounted`钩子函数中调用`autoScroll`方法启动自动滚动。`autoScroll`方法使用`setInterval`定时器实现每隔3秒钟向上滚动一张图片和对应的数据。具体实现方式是:先复制第一张图片和数据的`li`元素,然后将复制的`li`元素追加到列表的最后,再设置`transform`属性实现向上滚动的动画效果,动画结束后删除原来的第一张图片和数据的`li`元素。CSS样式中使用了Flex布局和CSS3的`transition`和`transform`属性实现了自适应的滚动效果。