Swipe Slider View Container

Introduction

The Swipe Slider View Container is used to display content in a sliding format. It should only contain swiper-item components to define the content of each slide. Using other components may result in undefined behavior.

Property Description

Parameter	Description	Type	Default
autoplay	Interval for automatic slide transition (in ms)	number / string	-
duration	Animation duration (in ms)	number / string	500
initial-swipe	Initial slide index	number / string	0
width	Width of the slider (in px)	number / string	auto
height	Height of the slider (in px)	number / string	auto
loop	Enable looped playback	boolean	TRUE
show-indicators	Show slide indicators	boolean	TRUE
vertical	Enable vertical scrolling	boolean	FALSE
touchable	Enable swipe gestures	boolean	TRUE
stop-propagation	Prevent swipe event propagation	boolean	TRUE
lazy-render	Delay rendering of non-displayed slides	boolean	FALSE
indicator-color	Indicator color	string	#1989fa

Events

Swipe Events

Event Name	Description	Callback Parameters
change	Triggered after each slide transition	index: current slide index

SwipeItem Events

Event Name	Description	Callback Parameters
click	Triggered on click	event: Event object

Swipe Slots

Name	Description
default	Slide content
indicator	Custom indicators

Example

<view class="pd16 swiper">
  <mswiper
    class="br4 content"
    :autoplay="autoPlay ? autoPlayNum : 0"
    :vertical="isColumn"
    :duration="speed"
    :initial-swipe="initialSwipe"
    :loop="loop"
    :show-indicators="paginationVisible"
  >
    <mswiper-item class="swiper-slide flex-center-center">1</mswiper-item>
    <mswiper-item class="swiper-slide flex-center-center">2</mswiper-item>
    <mswiper-item class="swiper-slide flex-center-center">3</mswiper-item>
  </mswiper>

  <view class="bg-white br4 mt12 control">
    <view class="flex-between-center control-item">
      <text>Dots Indicator</text>
      <mswitch
        :active="paginationVisible"
        bind:change="handleDotsSwitch"
      ></mswitch>
    </view>
    <view class="flex-between-center control-item">
      <text>Column View</text>
      <mswitch :active="isColumn" bind:change="handleDirectionSwitch"></mswitch>
    </view>
    <view class="flex-between-center control-item">
      <text>Autoplay</text>
      <mswitch :active="autoPlay" bind:change="handleAutoplaySwitch"></mswitch>
    </view>
    <view class="flex-between-center control-item">
      <text>Loop</text>
      <mswitch :active="loop" bind:change="handleLoopSwitch"></mswitch>
    </view>
    <view class="control-slider-item flex-center-center">
      <view class="w100">
        <view class="flex-between-center">
          <text>Duration in slide transition (ms)</text>
          <text>{{ speed }}</text>
        </view>
        <slider
          class="mt12"
          key="speed"
          :range="transtionRange"
          :stage="stage"
          :value="speed"
          bind:change="handleSpeedSlideChange"
        ></slider>
      </view>
      <view class="mt24 w100">
        <view class="flex-between-center">
          <text>Autoplay Interval</text>
          <text>{{ autoPlayNum }}</text>
        </view>
        <slider
          class="mt12"
          key="autoplay"
          :range="autoRange"
          :stage="stage"
          :value="autoPlayNum"
          bind:change="handleAutoplaySlideChange"
        ></slider>
      </view>
    </view>
  </view>
</view>

.swiper .content {
  width: 100%;
  height: 184px;
}

.swiper .content .swiper-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
}

.swiper .content .swiper-slide:nth-child(1) {
  background: #0081ff;
}

.swiper .content .swiper-slide:nth-child(2) {
  background: #00d7ae;
}

.swiper .content .swiper-slide:nth-child(3) {
  color: #191f2b;
  background: #e4e6eb;
}

.swiper .control {
  padding: 0 16px;
  color: #191f2b;
  line-height: 16px;
}

.swiper .control .control-item {
  height: 52px;
  box-shadow: 0px -0.5px 0px 0px #e4e6eb inset;
}

.swiper .control .control-slider-item {
  height: 160px;
  flex-direction: column;
  box-shadow: 0px -0.5px 0px 0px #e4e6eb inset;
}

.swiper .control .control-slider-item:last-child {
  box-shadow: none;
}

.w100 {
  width: 100%;
}

Page({
  data: {
    paginationVisible: true,
    isColumn: false,
    loop: false,
    autoPlay: false,
    autoPlayNum: 2000,
    speed: 500,
    transtionRange: [200, 1000],
    autoRange: [500, 2000],
    stage: 100,
    initialSwipe: 0,
  },
  handleDotsSwitch(val) {
    this.setData({
      paginationVisible: val,
    });
  },
  handleDirectionSwitch(val) {
    this.setData({
      isColumn: val,
      initialSwipe: 0,
    });
  },
  handleAutoplaySwitch(val) {
    this.setData({
      autoPlay: val,
      loop: val,
    });
  },
  handleLoopSwitch(val) {
    this.setData({
      loop: val,
    });
  },
  handleSpeedSlideChange(val) {
    this.setData({
      speed: val,
    });
  },
  handleAutoplaySlideChange(val) {
    this.setData({
      autoPlayNum: val,
    });
  },
});