我们使用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    开启纵向滑动