做一个vue的滚动展示循环
时间: 2024-05-12 08:18:07 浏览: 7
列表怎么实现?
可以使用vue-awesome-swiper插件来实现滚动展示循环列表。首先安装插件:
```
npm install vue-awesome-swiper --save
```
然后在组件中引入:
```
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in list" :key="item.id">{{item.title}}</div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
components: {
Swiper,
SwiperSlide
},
data () {
return {
list: [
{ id: 1, title: 'item1' },
{ id: 2, title: 'item2' },
{ id: 3, title: 'item3' },
{ id: 4, title: 'item4' },
{ id: 5, title: 'item5' }
],
swiperOption: {
slidesPerView: 3, // 每页显示个数
spaceBetween: 30 // 间隔
}
}
}
}
</script>
<style>
.swiper-container {
width: 100%;
}
.swiper-slide {
background-color: #fff;
text-align: center;
height: 100%;
border-radius: 6px;
box-shadow: 0 4px 25px rgba(34, 50, 84, 0.1);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
}
</style>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)