swiper | uni-app-x

展示全部

# swiper

组件类型：UniSwiperElement

滑块视图容器

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

string(string.ColorString)

"rgba(0, 0, 0, .3)"

指示点颜色

indicator-active-color

string(string.ColorString)

"#000000"

当前选中的指示点颜色

active-class

string

swiper-item 可见时的 class

changing-class

boolean

acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class

acceleration

boolean

当开启时，会根据滑动速度，连续滑动多屏

disable-programmatic-animation

boolean

是否禁用代码变动触发 swiper 切换时使用动画。

disable-touch

boolean

false

是否禁止用户 touch 操作

touchable

boolean

是否监听用户的触摸事件

easing-function

string

指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic

合法值

兼容性

描述

default

linear

easeInCubic

easeOutCubic

easeInOutCubic

autoplay

boolean

false

是否自动切换

current

number

当前所在滑块的 index

current-item-id

string

当前所在滑块的 item-id ，不能与 current 被同时指定

interval

number

3000

自动切换时间间隔

duration

number

滑动动画时长

circular

boolean

false

是否采用衔接滑动

vertical

boolean

false

滑动方向是否为纵向

rebound

boolean

true

控制是否回弹效果

previous-margin

string

前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值

next-margin

string

后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

display-multiple-items

number

同时显示的滑块数量

skip-hidden-item-layout

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

UniSwiperChangeEventDetail

是

名称

类型

必备

默认值

兼容性

描述

current

number

是

发生change事件的滑块下标

currentItemId

string

否

切换结束的 swiper-item 的 item-id 属性值

source

string

是

autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化

# UniSwiperTransitionEvent

# UniSwiperTransitionEvent 的属性值

名称

类型

必填

默认值

兼容性

描述

detail

UniSwiperTransitionEventDetail

是

名称	类型	必备	默认值	兼容性	描述
dx	number	是	-	-	横向偏移量，单位是逻辑像素px
dy	number	是	-	-	纵向偏移量，单位是逻辑像素px

# UniSwiperAnimationFinishEvent

# UniSwiperAnimationFinishEvent 的属性值

名称

类型

必填

默认值

兼容性

描述

detail

UniSwiperAnimationFinishEventDetail

是

名称

类型

必备

默认值

兼容性

描述

current

number

是

发生动画结束事件的滑块下标

currentItemId

string

否

动画结束的 swiper-item 的 item-id 属性值

source

string

是

autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化

# 子组件

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 id="swiper-view" 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" @touchstart="swipertouchStart">
          <swiper-item item-id="A">
            <view class="swiper-item uni-bg-red"><text class="swiper-item-Text" @touchstart="viewtouchStart">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>