SwiperItem
It can be placed only in the swiper component, with the width and height each automatically set to 100%.
Type
ComponentType<SwiperItemProps>
Examples
- 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
Property | Type | Required | Description |
---|---|---|---|
itemId | string | No | The identifier of the swiper-item |
Property Support
Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
SwiperItemProps.itemId | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
SwiperItem | ✔️ |
Note
- Do not set the style attribute for
SwiperItem
, you can set the style via class. 7147