• 下载
  • 社区

swiper 滑块视图容器

滑块视图容器。其中,只可放置 swiper-item,否则会导致未定义的行为。

扫码体验

img.jpg

效果示例

swiper示例.png

示例代码

// 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 绑定事件。

属性

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

常见问题

如何设置 swiper 组件高度?

swiper 高度是根据 swiper-item 里的元素高度适应的,所以可以通过设置 swiper item 元素高度来控制 swiper 高度。

swiper 组件是否可以放在地图上用?

不可以,map 组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法在原生组件之上。

为何 swiper 组件设置宽度100%但是左右还是有空白距离?

去除 previous-margin 和 next-margin 的设置距离。

swiper 组件的首张图片与左边的间隔是否可以和组件中 item 的图片间隔保持一致?

可以根据 previous-margin 设置一下前边距。

调用 swiper 组件,为什么最后一个 swiper-item 后有很大的空白?

swiper-item 嵌套 cover-view 的原因,建议使用 view 做嵌套。

swiper里面不能显示多个 swiper-item 吗?

swiper 可以有多个 swiper-item ,但是前台展示的只有一个。