跳到主要内容
版本:4.x

SwiperItem

仅可放置在 swiper 组件中,宽高自动设置为100%

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

支持情况:

参考文档

类型

ComponentType<SwiperItemProps>

示例代码

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>
)
}
}

SwiperItemProps

参数类型默认值必填说明
itemIdstring该 swiper-item 的标识符
skipHiddenItemLayoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
deepbooleanfalseSwiper 循环状态下,前后垫片节点拷贝模式,用于修复 Vue 在 CustomElements 下的节点拷贝问题

API 支持度

API微信小程序百度小程序抖音小程序京东小程序H5React NativeHarmonyHarmony hybrid
SwiperItemProps.itemId✔️✔️✔️✔️✔️✔️✔️
SwiperItemProps.skipHiddenItemLayout✔️
SwiperItemProps.deep✔️