跳到主要内容
版本:3.x

Swiper

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

不要为 SwiperItem 设置 style 属性,可以通过 class 设置样式。7147

支持情况:

参考文档

类型

ComponentType<SwiperProps>

示例代码

class App extends Component {
render () {
return (
<Swiper
className='test-h'
indicatorColor='#999'
indicatorActiveColor='#333'
vertical
circular
indicatorDots
autoplay>
<SwiperItem>
<View className='demo-text-1'>1</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-2'>2</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-3'>3</View>
</SwiperItem>
</Swiper>
)
}
}

SwiperProps

参数类型默认值必填说明
indicatorDotsbooleanfalse是否显示面板指示点
indicatorColorstring"rgba(0, 0, 0, .3)"指示点颜色
indicatorActiveColorstring"#000000"当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
currentnumber0当前所在滑块的 index
currentItemIdstring""当前所在滑块的 item-id ,不能与 current 被同时指定
intervalnumber5000自动切换时间间隔
durationnumber500滑动动画时长
circularbooleanfalse是否采用衔接滑动
verticalbooleanfalse滑动方向是否为纵向
previousMarginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
nextMarginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
snapToEdgebooleanfalse当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素
displayMultipleItemsnumber1同时显示的滑块数量
skipHiddenItemLayoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
easingFunctionkeyof TEasingFunction"default"指定 swiper 切换缓动动画类型
disableTouchbooleanfalse是否禁止用户 touch 操作
zoombooleanfalse是否启用缩放
fullbooleanfalse是否开启全屏
activeClassstringswiper-item 可见时的 class。
changingClassstringacceleration 设置为 {{true}} 时且处于滑动过程中,中间若干屏处于可见时的 class。
accelerationstringfalse当开启时,会根据滑动速度,连续滑动多屏。
disableProgrammaticAnimationstringfalse是否禁用代码变动触发 swiper 切换时使用动画。
swipeRatiostring滑动距离阈值,当滑动距离超过阈值时进行 swiper-item 切换。
swipeSpeedstring滑动综合速度阈值,当超过阈值时进行 swiper-item 切换,数值越小越敏感。
touchAnglestring计算用户手势时所依赖的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高。
adjustHeight"first" or "current" or "highest" or "none"自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时,默认不调整。可选值为:
adjustVerticalHeightstringvertical 为 true 时强制使 adjust-height 生效。
disableTouchmovestringfalse是否停止响应用户 touchmove 操作
scrollWithAnimationbooleantrue改变 current 时使用动画过渡
cacheExtentnumber0缓存区域大小,值为 1 表示提前渲染上下各一屏区域(swiper 容器大小)
onChangeCommonEventFunction<onChangeEventDetail>current 改变时会触发 change 事件
onTransitionCommonEventFunction<onTransitionEventDetail>swiper-item 的位置发生改变时会触发 transition 事件
onAnimationFinishCommonEventFunction<onChangeEventDetail>动画结束时会触发 animationfinish 事件
onAnimationEndCommonEventFunction<onCommonEventDetail>动画结束时会触发 animationEnd 事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
SwiperProps.indicatorDots✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorActiveColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.autoplay✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.current✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.currentItemId(deprecated)✔️✔️✔️✔️✔️✔️
SwiperProps.interval✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.duration✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.circular✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.vertical✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.previousMargin✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.nextMargin✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.snapToEdge✔️✔️
SwiperProps.displayMultipleItems✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.skipHiddenItemLayout✔️✔️
SwiperProps.easingFunction✔️✔️✔️✔️
SwiperProps.disableTouch✔️
SwiperProps.zoom✔️✔️
SwiperProps.full✔️✔️
SwiperProps.activeClass✔️
SwiperProps.changingClass✔️
SwiperProps.acceleration✔️
SwiperProps.disableProgrammaticAnimation✔️
SwiperProps.swipeRatio✔️
SwiperProps.swipeSpeed✔️
SwiperProps.touchAngle✔️
SwiperProps.adjustHeight✔️
SwiperProps.adjustVerticalHeight✔️
SwiperProps.disableTouchmove✔️
SwiperProps.scrollWithAnimation✔️
SwiperProps.cacheExtent✔️
SwiperProps.onChange✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.onTransition✔️✔️✔️✔️
SwiperProps.onAnimationFinish✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.onAnimationEnd✔️

TChangeSource

导致变更的原因

参数说明
autoplay自动播放
touch用户划动
其它原因

TEasingFunction

指定 swiper 切换缓动动画类型

参数说明
default默认缓动函数
linear线性动画
easeInCubic缓入动画
easeOutCubic缓出动画
easeInOutCubic缓入缓出动画

onCommonEventDetail

参数类型说明
currentnumber当前所在滑块的索引
sourcekeyof TChangeSource导致变更的原因

onChangeEventDetail

参数类型必填说明
currentnumber当前所在滑块的索引
sourcekeyof TChangeSource导致变更的原因
currentItemIdstringSwiperItem的itemId参数值

onTransitionEventDetail

参数类型说明
dxnumberX 坐标
dynumberY 坐标