简体中文
组件类型:UniSwiperElement
滑块视图容器
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} |
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniSwiperChangeDetail | 是 | - | - | |||||||||||||||
| |||||||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | |||||||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | |||||||||||||||
type | string | 是 | - | 事件类型 | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniSwiperTransitionDetail | 是 | - | - | |||||||||||||||
| |||||||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | |||||||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | |||||||||||||||
type | string | 是 | - | 事件类型 | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniSwiperAnimationFinishDetail | 是 | - | - | |||||||||||||||
| |||||||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | |||||||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | |||||||||||||||
type | string | 是 | - | 事件类型 | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
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 |
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>
组件类型:UniSwiperItemElement
swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
item-id | string | - | 该 swiper-item 的标识符 |
Android | iOS | web | |
---|---|---|---|
item-id | 3.9 | 4.11 | 4.0 |