swiper-滑块视图容器

官方API给出的swiper相关内容有

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
bindchange	EventHandle		current 改变时会触发change 事件，event.detail = {current: current, source: source}

从公共库v1.4.0开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

autoplay 自动播放导致swiper变化；

touch 用户划动引起swiper变化；

注意：其中只可放置组件，否则会导致未定义的行为。

我的理解：

swiper是滑动组件容器，控制着一组轮播图。在这个容器里需要存放的是它的组件也就是swiper-item。实例如下，需要有几个轮播图就在swiper容器中写几个swiper-item。

<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>

swiper-item的高度默认为swiper的100%，因此想要改变显示的图片的大小需要早swiper中修改。

我的代码练习片段：

<swiper class="swiper" indicator-dots="true" vertical="false" indicator-color="#eecdab"indicator-active-color="#ee8262" autoplay="true" interval="2000">
<swiper-item><image src="/pics/1.jpg"></image></swiper-item>
<swiper-item><image src="/pics/2.jpg"></image></swiper-item>
</swiper>