uni-app使用滑动视图容器实现图片轮播【swiper】

一.简介

swiper：滑块视图容器，就是我们常用的轮播图。
swiper-item：仅可放置在 组件中，宽高自动设置为100%，唯一属性item-id，String类型，表示该 swiper-item 的标识符。
属性说明：

特点：
change事件返回 detail 中包含一个 source 字段，表示导致变更的原因，值：

• autoplay 自动播放导致swiper变化
• touch 用户划动引起swiper变化
• 其他原因将用空字符串表示

二.代码实现

1.界面

<swiper class="swiper" autoplay="true" indicator-dots="true" indicator-color="#fff">
 	<swiper-item id="item1">
		<image src="/image/xhr.jpg" mode="aspectFill"></image>
	</swiper-item>
	<swiper-item id="item2">
		<cover-image class="img" src="/image/xjzb.jpg"></cover-image>
	</swiper-item>
	<swiper-item id="item3">
		<image src="/image/gtx.jpg" mode="aspectFill"></image>
	</swiper-item> 
</swiper>

2.css样式

#item1{
	width: 100%;
	height: 100%;
}
#item2{
	width: 100%;
	height: 100%;
}
#item3{
	width: 100%;
	height: 100%;
}

三.实现效果