Version: 下个版本

Swiper

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

参考文档

类型#

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 值
displayMultipleItemsnumber1同时显示的滑块数量
skipHiddenItemLayoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
easingFunction"default" | "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic""default"指定 swiper 切换缓动动画类型
onChangeBaseEventOrigFunction<onChangeEventDeatil>current 改变时会触发 change 事件
onTransitionBaseEventOrigFunction<onTransitionEventDetail>swiper-item 的位置发生改变时会触发 transition 事件
onAnimationFinishBaseEventOrigFunction<onChangeEventDeatil>动画结束时会触发 animationfinish 事件

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.displayMultipleItems✔️✔️✔️✔️
SwiperProps.skipHiddenItemLayout✔️✔️
SwiperProps.easingFunction✔️
SwiperProps.onChange✔️✔️✔️✔️✔️✔️
SwiperProps.onTransition✔️
SwiperProps.onAnimationFinish✔️✔️✔️✔️

TChangeSource#

导致变更的原因

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

TEasingFunction#

指定 swiper 切换缓动动画类型

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

onChangeEventDeatil#

参数类型说明
currentnumber当前所在滑块的索引
source"" | "autoplay" | "touch"导致变更的原因

onTransitionEventDetail#

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

API 支持度#

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Swiper✔️✔️✔️✔️✔️✔️

注意#

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