支付寶小程序組件 滑塊視圖容器·swiper

滑塊視圖容器。其中，只可放置 swiper-item，否則會(huì)導(dǎo)致未定義的行為。swiper 高度可以通過(guò)設(shè)置 swiper item 元素高度來(lái)控制，swiper-item 的高度取決于第一個(gè) swiper-item 的高度。

說(shuō)明：

• swiper 組件不可以放在地圖上用，map 組件是由客戶端創(chuàng)建的原生組件，原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法在原生組件之上。
• 去除 previous-margin 和 next-margin 的設(shè)置距離可刪除 swiper 組件左右空白距離。
• swiper 組件的首張圖片與左邊的間隔可以和組件中 item 的圖片間隔保持一致，可以根據(jù) previous-margin 設(shè)置一下前邊距。
• 調(diào)用 swiper 組件，swiper-item 嵌套 cover-view 會(huì)導(dǎo)致最后一個(gè) swiper-item 后有很大的空白，建議使用 view 做嵌套。
• swiper 可以有多個(gè) swiper-item ,但是前臺(tái)展示的只有一個(gè)。

掃碼體驗(yàn)

示例代碼

// 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 組件中，寬高自動(dòng)設(shè)置為 100%。
• swiper-item 不能添加事件，建議嵌套 view 綁定事件。

屬性