SwiperItem

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

参考文档

类型

  1. ComponentType<SwiperItemProps>

示例代码

  • 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>

SwiperItemProps

参数类型必填说明
itemIdstring否该 swiper-item 的标识符

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
SwiperItemProps.itemId✔️✔️✔️✔️✔️✔️

注意

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