视图容器swiper有哪些属性,如何使用_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

滑块视图容器。

属性名	类型	默认值	描述	最低版本
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
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 siwper 切换时使用动画。	1.13.7
onChange	EventHandle	-	current 改变时会触发，`event.detail = {current, isChanging}`，其中 `isChanging` 需 `acceleration` 设置为 `{{true}}` 时才有值，当连续滑动多屏时，中间若干屏触发 `onChange` 事件时 `isChanging` 为 `true`，最后一屏返回 `false`。	-
onTransition	EventHandle	-	swiper 中 swiper-item 的位置发生改变时会触发 transition 事件。	1.15.0
onAnimationEnd	EventHandle	-	动画结束时会触发 animationEnd 事件，`event.detail = {current, source}`，其中source的值有 `autoplay` 和 `touch`。	1.15.0
disable-touch	Boolean	false	是否禁用用户 touch 操作。	1.15.0

swiper-item

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

图示

screenshoot

代码示例

<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
    })
  },
})