微信小程序中swiper轮播图组件的使用

swiper属性

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

1. indicator-dots：是否显示面板指示点，默认false。
2. indicator-color：指示点颜色。
3. indicator-active-color：当前选中的指示点颜色。
4. autoplay： 是否自动切换，默认false。
5. current：当前所在滑块的 index，默认0。
6. interval：自动切换时间间隔，默认5000。
7. duration：滑动动画时长，默认500。
8. circular：是否采用衔接滑动，默认false。是否从最后一页直接滑回第一页，默认一页一页滑动返回第一页。
9. vertical：滑动方向是否为纵向，默认false。
10. display-multiple-items：同时显示的滑块数量，默认1。
11. previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值。
12. easing-function：指定 swiper 切换缓动动画类型，default默认linear线性easeInCubic缓入easeOutCubic缓出easeInOutCubic缓入缓出。
13. bindchange：current 改变时会触发 change 事件，event.detail = {current当前页数,source来源}。
14. bindtransition：swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx横轴距离, dy: dy竖轴距离}。Skyline 仅支持非 worklet 的组件方法作为回调。
15. bindanimationfinish：动画结束时会触发 animationfinish 事件，event.detail 同 bindchange。Skyline 仅支持非 worklet 的组件方法作为回调。

swiper-item属性

1. item-id：该 swiper-item 的标识符，非必填。
2. skip-hidden-item-layout：是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息，默认false。

示例

  <swiper autoplay circular indicator-dots="true" interval="1000" indicator-color="#ff0000" indicator-active-color="#00ff00" current="1" easing-function="easeInOutCubic" bindchange="onBindchange" bindanimationfinish="onBindanimationfinish">
    <swiper-item wx:for="{{imgList}}" wx:key="*this">
      <image src="/assets/{{item}}" mode="" show-menu-by-longpress="true" />
    </swiper-item>
  </swiper>