全部产品

swiper

更新时间:2020-03-25 19:40:52

滑块视图容器。

属性名 类型 默认值 描述 最低版本
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 是否禁用代码变动触发 siwper 切换时使用动画。 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-item

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

图示

screenshoot

代码示例

  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. })