我们使用swiper标签就可以实现轮播图的效果。

一、swiper组件的结构

整体的轮播图使用swiper标签，轮播的每一页使用swiper-item标签。

<template><swiper class="swiper"><swiper-item><view class="swiper-item">11111</view></swiper-item><swiper-item><view class="swiper-item">22222</view></swiper-item><swiper-item><view class="swiper-item">33333</view></swiper-item><swiper-item><view class="swiper-item">44444</view></swiper-item><swiper-item><view class="swiper-item">55555</view></swiper-item></swiper>
</template><style lang="scss">.swiper{width: 100vw;height: 200px;}.swiper-item{width: 100%;height: 100%;background-color: lightblue;}
</style>

 

二、指示点设置

indicator-dots    显示指示点

indicator-color    指示点的颜色    属性是rgba(...)

indicator-active-color    当前选中的指示点颜色    属性是#...

 

三、衔接滑动

circular    开启衔接滑动

衔接滑动开启后，就可以实现第一张和最后一张之间的轮播效果。

即“55555”往后滑一张是“11111”；“11111”往前滑一张是“55555”。

 四、自动切换

autoplay     开启自动切换

interval     自动切换的时间     属性单位是毫秒（默认5000，即5秒）

 五、纵向滑动

vertical    开启纵向滑动