Name	Type	Default Value	Mandatory	Description
indicator-dots	boolean	false	No	Whether to display the indicator dots.
indicator-color	string	rgba(0, 0, 0, .3)	No	Indicator dot color.
indicator-active-color	string	#0A59F7	No	Color of the selected indicator dot.
current	number	0	No	Index of the current swiper. Since: 1.0.3
autoplay	boolean	false	No	Whether to enable autoplay.
interval	number	5000	No	Autoplay interval.
duration	number	500	No	Swiping animation duration.
circular	boolean	false	No	Whether to enable circular sliding.
vertical	boolean	false	No	Whether the swiping direction is vertical.
display-multiple-items	number	1	No	Number of swipers that can be displayed at the same time.
previous-margin	string	"0px"	No	Front margin, which can be used to expose a small part of the previous item. The value can be in px or rpx.
next-margin	string	"0px"	No	Back margin, which can be used to expose a small part of the next item. The value can be in px or rpx.
disable-touch	boolean	false	No	Whether to disable the touch operation.

Events

Name	Type	Description
bindchange	event	Event triggered when current changes, with event.detail = {current, source}.
bindtransition	event	Event triggered when the position of swiper-item changes, with event.detail = {dx: dx, dy: dy}.
bindanimationfinish	event	Event triggered when the animation ends. event.detail is the same as that of bindchange.

Example

HXML file:

<view class="page-body">
  <view class="page-section page-section-spacing swiper">
    <swiper
      indicator-dots="{{indicatorDots}}"
      indicator-color="{{beforeColor}}"
      indicator-active-color="{{afterColor}}"
      autoplay="{{autoplay}}"
      interval="{{interval}}"
      duration="{{duration}}"
      current="{{current}}"
      circular="{{circular}}"
      vertical="{{vertical}}"
      previous-margin="{{previousmargin}}"
      next-margin="{{nextmargin}}"
      display-multiple-items="{{displaymultipleitems}}"
      disable-touch="{{disableTouch}}"      
      bindchange="changeCurrent"
      bindtransition="bindtransition"
      bindanimationfinish="bindanimationfinish">
      <block has:for="{{background}}" has:key="*this">
        <swiper-item item-id="{{item}}">
          <view class="swiper-item {{item}}"></view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="page-section" style="margin-top: 40rpx; margin-bottom: 0">
    <view class="ascf-cells">
      <view class="ascf-cell ascf-cell_switch">
        <view class="ascf-cell__bd">Indicator dot</view>
        <view class="ascf-cell__ft">
          <switch
            checked="{{indicatorDots}}"
            bindchange="changeIndicatorDots"/>
        </view>
      </view>
      <view class="ascf-cell ascf-cell_switch">
        <view class="ascf-cell__bd">Autoplay</view>
        <view class="ascf-cell__ft">
          <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
        </view>
      </view>
      <view class="ascf-cell ascf-cell_switch">
        <view class="ascf-cell__bd">Circular sliding</view>
        <view class="ascf-cell__ft">
          <switch checked="{{circular}}" bindchange="changeCircular" />
        </view>
      </view>
      <view class="ascf-cell ascf-cell_switch">
        <view class="ascf-cell__bd">Vertical</view>
        <view class="ascf-cell__ft">
          <switch checked="{{vertical}}" bindchange="changeVertical" />
        </view>
      </view>
      <view class="ascf-cell ascf-cell_switch">
        <view class="ascf-cell__bd">Disable the touch operation</view>
        <view class="ascf-cell__ft">
          <switch checked="{{disableTouch}}" bindchange="changeDisableTouch" />
        </view>
      </view>
    </view>
  </view>
  <view>{{eventData}}</view>
  <view>{{transition}}</view>
  <view>Animation:{{animationfinish}}</view>
  </view>
  <view class="page-section page-section-spacing">
    <view class="page-section-title">
      <text>Slide switch duration (ms)</text>
      <text class="info">{{duration}}</text>
    </view>
    <slider
      bindchange="durationChange"
      value="{{duration}}"
      min="500"
      max="2000"/>
    <view class="page-section-title">
      <text>Autoplay interval (ms)</text>
      <text class="info">{{interval}}</text>
    </view>
    <slider
      bindchange="intervalChange"
      value="{{interval}}"
      min="2000"
      max="10000"/>
    <view class="page-section-title">
      <text>Front margin previous-margin</text>
      <text class="info">{{previousmargin}}</text>
    </view>
    <slider
      bindchange="previousmarginChange"
      value="{{previousmargindata}}"
      min="0"
      max="100"/>
    <view class="page-section-title">
      <text>Back margin next-margin</text>
      <text class="info">{{nextmargin}}</text>
    </view>
    <slider
      bindchange="nextmarginChange"
      value="{{nextmargindata}}"
      min="0"
      max="100"/>
    <view class="page-section-title">
      <text>Number of swipers that can be displayed at the same time</text>
      <text class="info">{{displaymultipleitems}}</text>
    </view>
    <slider
      bindchange="displaymultipleitemsChange"
      value="{{displaymultipleitems}}"
      min="1"
      max="3"/>
  </view>
</view>

JS file:

Page({
  data: {
    background: [
      "demo-text-1",
      "demo-text-2",
      "demo-text-3",
      "demo-text-4",
      "demo-text-5",
      "demo-text-6",
    ],
    indicatorDots: true,
    autoplay: false,
    interval: 2000,
    duration: 500,
    current: 0,
    beforeColor: "rgba(0, 0, 0, .3)",
    afterColor: "coral",
    circular: false,
    vertical: false,
    previousmargin: "0px",
    nextmargin: "0rpx",
    displaymultipleitems: 1,
    eventData: "",
    transition: "",
    animationfinish: "",
    disableTouch: false,
  },
  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots,
    });
  },
  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay,
    });
  },
  changeCircular() {
    this.setData({
      circular: !this.data.circular,
    });
  },
  changeVertical() {
    this.setData({
      vertical: !this.data.vertical,
    });
  },
  changeDisableTouch() {
    this.setData({
      disableTouch: !this.data.disableTouch,
    });
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value,
    });
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value,
    });
  },
  previousmarginChange(e) {
    this.setData({
      previousmargin: e.detail.value + "px",
      previousmargindata: e.detail.value,
    });
  },
  nextmarginChange(e) {
    this.setData({
      nextmargin: e.detail.value + "rpx",
      nextmargindata: e.detail.value,
    });
  },
  displaymultipleitemsChange(e) {
    this.setData({
      displaymultipleitems: e.detail.value,
    });
  },
  setCurrent() {
    this.setData({
      current: 1,
    });
  },
  changeCurrent(e) {
    this.setData({
      eventData: JSON.stringify(e.detail),
    });
  },
  bindtransition(e) {
    this.setData({
      transition: JSON.stringify(e.detail),
    });
  },
  bindanimationfinish(e) {
    this.setData({
      animationfinish: JSON.stringify(e.detail),
    });
  },
});

目录

swiper

Constraints

Properties

Events

Example