swiper

组件类型：UniSwiperElement

滑块视图容器

swiper 兼容性

Android	iOS	web
3.9	4.11	4.0

属性

名称	类型	默认值	描述
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	string(string.ColorString)	"rgba(0, 0, 0, .3)"	指示点颜色
indicator-active-color	string(string.ColorString)	"#000000"	当前选中的指示点颜色
disable-touch	boolean	false	是否禁止用户 touch 操作
autoplay	boolean	false	是否自动切换
current	number	0	当前所在滑块的 index
current-item-id	string	-	当前所在滑块的 item-id ，不能与 current 被同时指定
interval	number	3000	自动切换时间间隔
duration	number	-	滑动动画时长
circular	boolean	false	是否采用衔接滑动
vertical	boolean	false	滑动方向是否为纵向
rebound	boolean	true	控制是否回弹效果
@change	(event: UniSwiperChangeEvent) => void	-	current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	(event: UniSwiperTransitionEvent) => void	-	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
@animationfinish	(event: UniSwiperAnimationFinishEvent) => void	-	动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}

事件

UniSwiperChangeEvent

UniSwiperChangeEvent 的属性值

名称	类型	必填	默认值	描述
detail	UniSwiperChangeDetail	是	-	-
名称 类型 必备 默认值 描述 current number 是 - 发生change事件的滑块下标 source string 是 - autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化
bubbles	boolean	是	-	是否冒泡
cancelable	boolean	是	-	是否可以取消
type	string	是	-	事件类型
target	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp	number	是	-	事件发生时的时间戳

UniSwiperChangeEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

UniSwiperTransitionEvent

UniSwiperTransitionEvent 的属性值

名称	类型	必填	默认值	描述
detail	UniSwiperTransitionDetail	是	-	-
名称 类型 必备 默认值 描述 dx number 是 - 横向偏移量，单位是逻辑像素px dy number 是 - 纵向偏移量，单位是逻辑像素px
bubbles	boolean	是	-	是否冒泡
cancelable	boolean	是	-	是否可以取消
type	string	是	-	事件类型
target	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp	number	是	-	事件发生时的时间戳

UniSwiperTransitionEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

UniSwiperAnimationFinishEvent

UniSwiperAnimationFinishEvent 的属性值

名称	类型	必填	默认值	描述
detail	UniSwiperAnimationFinishDetail	是	-	-
名称 类型 必备 默认值 描述 current number 是 - 发生动画结束事件的滑块下标 source string 是 - autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化
bubbles	boolean	是	-	是否冒泡
cancelable	boolean	是	-	是否可以取消
type	string	是	-	事件类型
target	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp	number	是	-	事件发生时的时间戳

UniSwiperAnimationFinishEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

swiper 属性兼容性

	Android	iOS	web
indicator-dots	3.9	4.11	4.0
indicator-color	3.9	4.11	4.0
indicator-active-color	3.9	4.11	4.0
disable-touch	3.9	4.11	-
autoplay	3.9	4.11	4.0
current	3.9	4.11	4.0
current-item-id	3.9	4.11	4.0
interval	3.9	4.11	4.0
duration	x	x	4.0
circular	3.9	4.11	4.0
vertical	3.9	4.11	4.0
rebound	3.9	4.11	-
@change	3.9	4.11	4.0
@transition	3.9	4.11	4.0
@animationfinish	3.9	4.11	4.0

子组件

• swiper-item

示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head title="swiper,可滑动视图"></page-head>
      <view class="uni-margin-wrap">
        <swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
          :rebound="reboundSelect" :interval="intervalSelect" :circular="circularSelect"
          :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive"
          :disable-touch="disableTouchSelect" :current="currentVal" :current-item-id="currentItemIdVal"
          @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
          <swiper-item item-id="A">
            <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
          </swiper-item>
          <swiper-item item-id="B">
            <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
          </swiper-item>
          <swiper-item item-id="C">
            <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
          </swiper-item>
        </swiper>
      </view>
      <view class="uni-list">
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">是否显示面板指示点</view>
          <switch :checked="dotsSelect" @change="dotsChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">是否自动切换</view>
          <switch :checked="autoplaySelect" @change="autoplayChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">是否循环</view>
          <switch :checked="circularSelect" @change="circularChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">是否显示rebound效果</view>
          <switch :checked="reboundSelect" @change="reboundSelectChange" />
        </view>
        <view class="uni-title uni-list-cell-padding">间隔时间(毫秒)</view>
        <view class="uni-list-cell-padding">
          <slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">定制指示器颜色</view>
          <switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">纵向</view>
          <switch :checked="verticalSelect" @change="verticalChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">指定current为最后一个元素</view>
          <switch :checked="currentSelect" @change="currentChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
          <switch :checked="currentItemIdSelect" @change="currentItemIdChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">禁止用户 touch 操作</view>
          <switch :checked="disableTouchSelect" @change="disableTouchChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">swiperTransition 是否打印</view>
          <switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
          <switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-padding">
          <view class="uni-list-cell-db">swiperChange 是否打印</view>
          <switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
        </view>

        <navigator url="/pages/component/swiper/swiper-list-view">
          <button type="primary">
            swiper 嵌套 list-view 测试
          </button>
        </navigator>

      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<style>
  .swiper {
    height: 150px;
  }

  .swiper-item {
    width: 100%;
    height: 150px;
  }

  .swiper-item-Text {
    width: 100%;
    text-align: center;
    line-height: 150px;
  }
</style>

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档
• 相关 Bug

swiper-item

组件类型：UniSwiperItemElement

swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%

swiper-item 兼容性

Android	iOS	web
3.9	4.11	4.0

属性

名称	类型	默认值	描述
item-id	string	-	该 swiper-item 的标识符

swiper-item 属性兼容性

	Android	iOS	web
item-id	3.9	4.11	4.0

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档