Skip to main content
Version: 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 切换缓动动画类型
onChangeCommonEventFunction<onChangeEventDetail>current 改变时会触发 change 事件
onTransitionCommonEventFunction<onTransitionEventDetail>swiper-item 的位置发生改变时会触发 transition 事件
onAnimationFinishCommonEventFunction<onChangeEventDetail>动画结束时会触发 animationfinish 事件
disableTouchbooleanfalse是否禁止用户 touch 操作

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
SwiperProps.indicatorDots✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorColor✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorActiveColor✔️✔️✔️✔️✔️✔️
SwiperProps.autoplay✔️✔️✔️✔️✔️✔️
SwiperProps.current✔️✔️✔️✔️✔️✔️
SwiperProps.interval✔️✔️✔️✔️✔️✔️
SwiperProps.duration✔️✔️✔️✔️✔️
SwiperProps.circular✔️✔️✔️✔️✔️✔️
SwiperProps.vertical✔️✔️✔️✔️✔️✔️
SwiperProps.previousMargin✔️✔️
SwiperProps.nextMargin✔️✔️
SwiperProps.snapToEdge✔️
SwiperProps.displayMultipleItems✔️✔️✔️✔️
SwiperProps.skipHiddenItemLayout✔️✔️
SwiperProps.easingFunction✔️
SwiperProps.onChange✔️✔️✔️✔️✔️✔️
SwiperProps.onTransition✔️
SwiperProps.onAnimationFinish✔️✔️✔️✔️
SwiperProps.disableTouch✔️

TChangeSource

导致变更的原因

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

TEasingFunction

指定 swiper 切换缓动动画类型

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

onChangeEventDetail

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

onTransitionEventDetail

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