# 轮播组件使用
<!-- 轮播图 -->
<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
<block v-for="(item, index) in topic.swiper" :key="index">
<swiper-item>
<image :src="item.src" mode="widthFix" lazy-load></image>
</swiper-item>
</block>
</swiper>
<style>
/* 轮播图 */
.topic-swiper {
padding: 0 20rpx 20rpx 20rpx;
height: calc(100vw * 340 / 750);
image {
width: 100%;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20