支付宝小程序组件 滑块视图容器·swiper

滑块视图容器。其中，只可放置 swiper-item，否则会导致未定义的行为。swiper 高度可以通过设置 swiper item 元素高度来控制，swiper-item 的高度取决于第一个 swiper-item 的高度。

说明：

• swiper 组件不可以放在地图上用，map 组件是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法在原生组件之上。
• 去除 previous-margin 和 next-margin 的设置距离可删除 swiper 组件左右空白距离。
• swiper 组件的首张图片与左边的间隔可以和组件中 item 的图片间隔保持一致，可以根据 previous-margin 设置一下前边距。
• 调用 swiper 组件，swiper-item 嵌套 cover-view 会导致最后一个 swiper-item 后有很大的空白，建议使用 view 做嵌套。
• swiper 可以有多个 swiper-item ,但是前台展示的只有一个。

扫码体验

示例代码

// API-DEMO page/component/swiper.json
{
  "defaultTitle": "Swiper",
  "pullRefresh": false,
  "allowsBounceVertical": false
}
<!-- API-DEMO page/component/swiper.axml-->
<view class="page">
  <view class="page-description">滑块视图容器</view>
  <view class="page-section">
    <view class="page-section-demo">
      <swiper 
        style="height:150px"
        class="demo-swiper"
        previousMargin="10px"
        nextMargin="10px"
        indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"
        vertical="{{vertical}}"
        interval="{{interval}}"
        circular="{{circular}}"
      >
        <block a:for="{{background}}">
          <swiper-item key="swiper-item-{{index}}">
            <view class="swiper-item bc_{{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
      <view class="margin-t">
        <slider onChange="intervalChange" value="{{interval}}" show-value min="500" max="2000"/>
        <view>interval</view>
      </view>
    </view>
    <view class="page-section-btns">
      <view onTap="changeIndicatorDots">indicator-dots</view>
      <view onTap="changeAutoplay">autoplay</view>
      <view onTap="changeVertical">vertical</view>
    </view>
    <view class="page-section-btns">
      <view onTap="changeCircular">circular</view>
    </view>
  </view>
</view>
// API-DEMO page/component/swiper.js
Page({
  data: {
    background: ['blue', 'red', 'yellow'],
    indicatorDots: true,
    autoplay: false,
    vertical: false,
    interval: 1000,
    circular: false,
  },
  onLoad() {
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots,
    });
  },
  changeVertical() {
    this.setData({
      vertical: !this.data.vertical,
    });
  },
  changeCircular(e) {
    this.setData({
      circular: !this.data.circular,
    });
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay,
    });
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value,
    });
  },
});
/* API-DEMO page/component/swiper.acss */
.swiper-item{
  display: block;
  height: 150px;
  margin:10px;
  background-color:#e0ffff;
}
.margin-t {
  margin-top: 24px;
}

swiper-item

• 仅可放置在 swiper 组件中，宽高自动设置为 100%。
• swiper-item 不能添加事件，建议嵌套 view 绑定事件。

属性