Swiper

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

参考文档

类型

  1. ComponentType<SwiperProps>

示例代码

  • React
  • Vue
  1. class App extends Component {
  2. render () {
  3. return (
  4. <Swiper
  5. className='test-h'
  6. indicatorColor='#999'
  7. indicatorActiveColor='#333'
  8. vertical
  9. circular
  10. indicatorDots
  11. autoplay>
  12. <SwiperItem>
  13. <View className='demo-text-1'>1</View>
  14. </SwiperItem>
  15. <SwiperItem>
  16. <View className='demo-text-2'>2</View>
  17. </SwiperItem>
  18. <SwiperItem>
  19. <View className='demo-text-3'>3</View>
  20. </SwiperItem>
  21. </Swiper>
  22. )
  23. }
  24. }
  1. <template>
  2. <swiper
  3. class='test-h'
  4. indicator-color='#999'
  5. indicator-active-color='#333'
  6. :vertical="true"
  7. :circular="true"
  8. :indicator-dots="true"
  9. :autoplay="true"
  10. >
  11. <swiper-item>
  12. <view class='demo-text-1'>1</view>
  13. </swiper-item>
  14. <swiper-item>
  15. <view class='demo-text-2'>2</view>
  16. </swiper-item>
  17. <swiper-item>
  18. <view class='demo-text-3'>3</view>
  19. </swiper-item>
  20. </swiper>
  21. </template>

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