SwiperItem - 《Taro 文档帮助手册教程》

sidebar_label: SwiperItem
Type
Examples
SwiperItemProps
- Property Support
API Support
Note

title: SwiperItem

sidebar_label: SwiperItem

It can be placed only in the swiper component, with the width and height each automatically set to 100%.

Reference

Type

ComponentType<SwiperItemProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

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