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

sidebar_label: SwiperItem
类型
示例代码
SwiperItemProps
- API 支持度

title: SwiperItem

sidebar_label: SwiperItem

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

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

支持情况： SwiperItem - 图1 SwiperItem - 图2 SwiperItem - 图3 SwiperItem - 图4 SwiperItem - 图5 SwiperItem - 图6

参考文档

类型

ComponentType<SwiperItemProps>

示例代码

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

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

API 支持度

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