跳到主要内容
版本：4.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否是否开启全屏
activeClassstring否swiper-item 可见时的 class。
changingClassstring否acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的 class。
accelerationstringfalse否当开启时，会根据滑动速度，连续滑动多屏。
disableProgrammaticAnimationstringfalse否是否禁用代码变动触发 swiper 切换时使用动画。
swipeRatiostring否滑动距离阈值，当滑动距离超过阈值时进行 swiper-item 切换。
swipeSpeedstring否滑动综合速度阈值，当超过阈值时进行 swiper-item 切换，数值越小越敏感。
touchAnglestring否计算用户手势时所依赖的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高。
adjustHeight"first" or "current" or "highest" or "none"否自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整。可选值为：
adjustVerticalHeightstring否vertical 为 true 时强制使 adjust-height 生效。
disableTouchmovestringfalse否是否停止响应用户 touchmove 操作
effectsPropsRecord<string, any>否swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters
onChangeCommonEventFunction<onChangeEventDetail>否current 改变时会触发 change 事件
onTransitionCommonEventFunction<onTransitionEventDetail>否swiper-item 的位置发生改变时会触发 transition 事件
onAnimationFinishCommonEventFunction<onChangeEventDetail>否动画结束时会触发 animationfinish 事件
onAnimationEndCommonEventFunction<onCommonEventDetail>否动画结束时会触发 animationEnd 事件
layoutType"normal" or "stackLeft" or "stackRight" or "tinder" or "transformer"normal否渲染模式
transformerType"scaleAndFade" or "accordion" or "threeD" or "zoomIn" or "zoomOut" or "deepthPage"scaleAndFade否layout-type 为 transformer 时指定动画类型
indicatorType"normal" or "worm" or "wormThin" or "wormUnderground" or "wormThinUnderground" or "expand" or "jump" or "jumpWithOffset" or "scroll" or "scrollFixedCenter" or "slide" or "slideUnderground" or "scale" or "swap" or "swapYRotation" or "color"normal否指示点动画类型
indicatorMarginnumber10否指示点四周边距
indicatorSpacingnumber4否指示点间距
indicatorRadiusnumber4否指示点圆角大小
indicatorWidthnumber8否指示点宽度
indicatorHeightnumber8否指示点高度
indicatorAlignmentstring or [number, number]auto否指示点的相对位置
indicatorOffset[number, number][0, 0]否指示点位置的偏移量
scrollWithAnimationbooleantrue否改变 current 时使用动画过渡
cacheExtentnumber0否缓存区域大小，值为 1 表示提前渲染上下各一屏区域（swiper 容器大小）
onScrollStartWorkletstring否滑动开始时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
onScrollUpdateWorkletstring否滑动位置更新时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
onScrollEndWorkletstring否滑动结束时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}

API 支持度​

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybridASCF元服务
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.effectsProps✔️
SwiperProps.onChange✔️✔️✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.onTransition✔️✔️✔️✔️✔️
SwiperProps.onAnimationFinish✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwiperProps.onAnimationEnd✔️
SwiperProps.layoutType✔️
SwiperProps.transformerType✔️
SwiperProps.indicatorType✔️
SwiperProps.indicatorMargin✔️
SwiperProps.indicatorSpacing✔️
SwiperProps.indicatorRadius✔️
SwiperProps.indicatorWidth✔️
SwiperProps.indicatorHeight✔️
SwiperProps.indicatorAlignment✔️
SwiperProps.indicatorOffset✔️
SwiperProps.scrollWithAnimation✔️
SwiperProps.cacheExtent✔️
SwiperProps.onScrollStartWorklet✔️
SwiperProps.onScrollUpdateWorklet✔️
SwiperProps.onScrollEndWorklet✔️

TChangeSource​

导致变更的原因

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

TEasingFunction​

指定 swiper 切换缓动动画类型

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

onCommonEventDetail​

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

onChangeEventDetail​

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

onTransitionEventDetail​

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