Swiper

Swiper

滑块视图容器。扫码体验：

属性名	类型	默认值	描述	最低版本
indicator-dots	Boolean	false	是否显示指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000	当前选中的指示点颜色
active-class	String		`swiper-item`可见时的`class`	1.13.7
changing-class	String		`acceleration`设置为`{{true}}`时且处于滑动过程中，中间若干屏处于可见时的`class`	1.13.7
autoplay	Boolean	false	是否自动切换
current	Number	0	当前页面的 index
duration	Number	500(ms)	滑动动画时长
interval	Number	5000(ms)	自动切换时间间隔
circular	Boolean	false	是否启用无限滑动
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	'0px'	前边距，单位px，1.9.0暂时只支持水平方向	1.9.0
next-margin	String	'0px'	后边距，单位px，1.9.0暂时只支持水平方向	1.9.0
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	1.13.7
onChange	EventHandle	否	current 改变时会触发，event.detail = {current, isChanging}，其中`isChanging`需`acceleration`设置为`{{true}}`时才有值，当连续滑动多屏时，中间若干屏触发`onChange`事件时`isChanging`为`true`,最后一屏返回`false`。

swiper-item

仅可放置在组件中，宽高自动设置为100%。

Sceenshot

示例代码

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
>
  <block a:for="{{background}}">
    <swiper-item>
      <view class="swiper-item bc_{{item}}"></view>
    </swiper-item>
  </block>
</swiper>
<view class="btn-area">
  <button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
  <button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
</view>
<slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>

Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    autoplay: false,
    interval: 3000,
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
})

原文: https://docs.alipay.com/mini/component/swiper