SwiperItem
仅可放置在 swiper 组件中,宽高自动设置为100%
不要为
SwiperItem
设置 style 属性,可以通过 class 设置样式。7147
支持情况:
类型
ComponentType<SwiperItemProps>
示例代码
- React
- Vue
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>
)
}
}
<template>
<swiper
class='test-h'
indicator-color='#999'
indicator-active-color='#333'
:vertical="true"
:circular="true"
:indicator-dots="true"
:autoplay="true"
>
<swiper-item>
<view class='demo-text-1'>1</view>
</swiper-item>
<swiper-item>
<view class='demo-text-2'>2</view>
</swiper-item>
<swiper-item>
<view class='demo-text-3'>3</view>
</swiper-item>
</swiper>
</template>
SwiperItemProps
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
itemId | string | 否 | 该 swiper-item 的标识符 | |
skipHiddenItemLayout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
deep | boolean | false | 否 | Swiper 循环状态下,前后垫片节点拷贝模式,用于修复 Vue 在 CustomElements 下的节点拷贝问题 |
API 支持度
API | 微信小程序 | 百度小程序 | 抖音小程序 | 京东小程序 | H5 | React Native | Harmony | Harmony hybrid |
---|---|---|---|---|---|---|---|---|
SwiperItemProps.itemId | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
SwiperItemProps.skipHiddenItemLayout | ✔️ | |||||||
SwiperItemProps.deep | ✔️ |