Swiper - Mobile Platform as a Service - Alibaba Cloud ドキュメントセンター

スライダービューコンテナー。

属性

属性	タイプ	デフォルト値	説明	最小バージョン
indicator-dots	ブール値	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	ブール値	false	自動的に切り替えるかどうか	-
current	Number	0	現在のページのインデックス	-
duration	Number	500(ms)	スライドアニメーションの期間	-
interval	Number	5000(ms)	自動切り替えの間隔	-
circular	ブール値	false	連続スライドを有効にするかどうか	-
vertical	ブール値	false	スライド方向が垂直かどうか	-
previous-margin	String	‘0px’	前のマージン、単位： px 。 1.9.0 は現在、水平方向のみをサポートしています	1.9.0
next-margin	String	‘0px’	後ろのマージン、単位： px 。 1.9.0 は現在、水平方向のみをサポートしています	1.9.0
acceleration	ブール値	false	有効にすると、スライド速度に応じて複数の画面が連続してスライドします	1.13.7
disable-programmatic-animation	ブール値	false	コード変更によって swiper の切り替えがトリガーされたときにアニメーションを無効にするかどうか	1.13.7
onChange	EventHandle	-	`current` が変更されるとトリガーされます。 `event.detail = {current, isChanging}` です。 `isChanging` は、`acceleration` が `{{true}}` に設定されている場合にのみ値を持ちます。複数の画面を連続してスライドする場合、途中の複数の画面で `onChange` イベントがトリガーされると `isChanging` は `true` になり、最後の画面では `false` が返されます。	-
onTransition	EventHandle	-	`swiper` 内の `swiper-item` の位置が変更されると、トランジションイベントがトリガーされます。	1.15.0
onAnimationEnd	EventHandle	-	アニメーションが終了すると、`animationEnd` イベントがトリガーされます。 `event.detail = {current, source}` です。 source 値は、`autoplay` および `touch` を使用できます	1.15.0
disable-touch	ブール値	false	ユーザーのタッチ操作を無効にするかどうか	1.15.0

swiper-item

コンポーネント内にのみ配置でき、幅と高さは自動的に 100% に設定されます。

凡例

image center

コード例

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