swiper 滑块视图容器

简介

滑块视图容器。内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为。

属性说明

参数	说明	类型	默认值
autoplay	自动轮播间隔，单位为 ms	number / string	-
duration	动画时长，单位为 ms	number / string	500
initial-swipe	初始位置索引值	number / string	0
width	滑块宽度，单位为 px	number / string	auto
height	滑块高度，单位为 px	number / string	auto
loop	是否开启循环播放	boolean	TRUE
show-indicators	是否显示指示器	boolean	TRUE
vertical	是否为纵向滚动	boolean	FALSE
touchable	是否可以通过手势滑动	boolean	TRUE
stop-propagation	是否阻止滑动事件冒泡	boolean	TRUE
lazy-render	是否延迟渲染未展示的轮播	boolean	FALSE
indicator-color	指示器颜色	string	#1989fa

Events

Swipe Events

事件名	说明	回调参数
change	每一页轮播结束后触发	index, 当前页的索引

SwipeItem Events

事件名	说明	回调参数
click	点击时触发	event: Event

Swipe Slots

名称	说明
default	轮播内容
indicator	自定义指示器

示例

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