常用组件-视图容器 swiper

1、滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
snap-to-edge	boolean	"false"	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	2.12.1
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

2、easing-function指定 swiper 切换缓动动画类型属性的有效值

值	说明	最低版本
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

3、change事件 source 返回值

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

1）、autoplay 自动播放导致swiper变化；

2）、touch 用户划动引起swiper变化；

3）、其它原因将用空字符串表示。

4、swiper-item 滑块

默认宽度和⾼度都是100%

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该 swiper-item 的标识符	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0

5、代码如下：

1）、WXML代码

<!--
    1、轮播图外层容器 swiper
    2、每一个轮播项 swiper-item
    3、swiper 标签存在默认样式
        1）、width 100%
        2）、height 150px image 存在默认宽度和高度 320px * 240px
        3）、swiper 高度 无法实现由内容撑开
    4、先找出来 原图的宽度和高度 等比例 给swiper 定宽度和高度
    原图的宽度和高度 1125px * 352px

    swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
    swiper 高度 = swiper 宽度 * 原图的宽度 / 原图的高度
    height：100vm * 352 / 1125 

    5、autoplay 自动轮播
    6、interval 修改轮播时间
    7、circular 衔接轮播
    8、indicator-dots 显示 指示器 分页器 索引器
    9、indicator-color 指示器的未选择的颜色
    10、indicator-active-color 选中的时候的指示器的颜色
-->
<swiper autoplay="{{true}}" interval="1000" circular="{{true}}" indicator-dots="{{true}}" indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

2）、WXSS代码

swiper{
    width: 100%;
    height: calc(100vw * 352 /  1125);
}
image{
    width: 100%;
}