Swiper

滑块视图容器

属性

属性名类型默认值说明
indicatorDotsBooleanfalse是否显示面板指示点
indicatorColorStringrgba(0, 0, 0, .3)指示点颜色
indicatorActiveColorString000当前选中的指示点颜色
autoplayBooleanfalse是否自动切换
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
currentNumber0当前所在滑块的 index
onChangeEventHandlecurrent 改变时会触发 change 事件
circularBooleanfalse是否采用衔接滑动
skipHiddenItemLayoutBooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
displayMultipleItemsNumber1同时显示的滑块数量
verticalBooleanfalse滑动方向是否为纵向
onAnimationfinishEventHandle动画结束时会触发 animationfinish 事件

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
indicatorDots
indicatorColor
indicatorActiveColor
autoplay
interval
durationx
current
onChange
circular
skipHiddenItemLayoutx
displayMultipleItemsx
vertical
onAnimationfinish
示例:
  1. importTaro,{Component}from'@tarojs/taro'
  2. // 引入 Swiper, SwiperItem 组件
  3. import{Swiper,SwiperItem,View}from'@tarojs/components'
  4. classAppextendsComponents{
  5. render (){
  6. return(
  7. <Swiper
  8. className='test-h'
  9. indicatorColor='#999'
  10. indicatorActiveColor='#333'
  11. vertical
  12. circular
  13. indicatorDots
  14. autoplay>
  15. <SwiperItem>
  16. <View className='demo-text-1'>1</View>
  17. </SwiperItem>
  18. <SwiperItem>
  19. <View className='demo-text-2'>2</View>
  20. </SwiperItem>
  21. <SwiperItem>
  22. <View className='demo-text-3'>3</View>
  23. </SwiperItem>
  24. </Swiper>
  25. )
  26. }
  27. }