swiper

滑块视图容器。

属性名 类型 默认值 描述
indicator-dots Boolean false 是否显示指示点。
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色。
indicator-active-color Color #000 当前选中的指示点颜色。
active-class String - swiper-item 可见时的class。
changing-class String - acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class。
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 暂时只支持水平方向。
next-margin String ‘0px’ 后边距，单位 px，1.9.0 暂时只支持水平方向。
acceleration Boolean false 当开启时，会根据滑动速度，连续滑动多屏。
disable-programmatic-animation Boolean false 是否禁用代码变动触发 siwper 切换时使用动画。
onChange EventHandle - current 改变时会触发，
event.detail = {current, isChanging}，其中isChanging需acceleration设置为{{true}}时才有值，当连续滑动多屏时，中间若干屏触发onChange事件时isChanging为true，最后一屏返回false。
onTransition EventHandle - swiper 中 swiper-item 的位置发生改变时会触发 transition 事件。
onAnimationEnd EventHandle - 动画结束时会触发 animationEnd 事件，event.detail = {current, source}，其中source的值有autoplay和touch。
disable-touch Boolean false 是否禁用用户 touch 操作。

swiper-item

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

图示

swiper - 图1

代码示例

  1. <swiper
  2.   indicator-dots="{{indicatorDots}}"
  3.   autoplay="{{autoplay}}"
  4.   interval="{{interval}}"
  5. >
  6.   <block a:for="{{background}}">
  7.     <swiper-item>
  8.       <view class="swiper-item bc_{{item}}"></view>
  9.     </swiper-item>
  10.   </block>
  11. </swiper>
  12. <view class="btn-area">
  13.   <button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
  14.   <button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
  15. </view>
  16. <slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
  17. <view class="section__title">interval</view>
  1. Page({
  2.   data: {
  3.     background: ['green', 'red', 'yellow'],
  4.     indicatorDots: true,
  5.     autoplay: false,
  6.     interval: 3000,
  7.   },
  8.   changeIndicatorDots(e) {
  9.     this.setData({
  10.       indicatorDots: !this.data.indicatorDots
  11.     })
  12.   },
  13.   changeAutoplay(e) {
  14.     this.setData({
  15.       autoplay: !this.data.autoplay
  16.     })
  17.   },
  18.   intervalChange(e) {
  19.     this.setData({
  20.       interval: e.detail.value
  21.     })
  22.   },
  23. })