UNPKG

2.14 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps } from './common'
3interface SwiperItemProps extends StandardProps {
4 /** 该 swiper-item 的标识符
5 * @supported weapp, swan, tt, jd, h5, rn
6 */
7 itemId?: string
8
9 /** 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
10 * @default false
11 * @supported weapp
12 */
13 skipHiddenItemLayout?: boolean
14}
15
16/** 仅可放置在 swiper 组件中,宽高自动设置为100%
17 * > 不要为 `SwiperItem` 设置 **style** 属性,可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
18 * @classification viewContainer
19 * @supported weapp, alipay, swan, tt, jd, h5, rn, harmony
20 * @example_react
21 * ```tsx
22 * class App extends Component {
23 * render () {
24 * return (
25 * <Swiper
26 * className='test-h'
27 * indicatorColor='#999'
28 * indicatorActiveColor='#333'
29 * vertical
30 * circular
31 * indicatorDots
32 * autoplay>
33 * <SwiperItem>
34 * <View className='demo-text-1'>1</View>
35 * </SwiperItem>
36 * <SwiperItem>
37 * <View className='demo-text-2'>2</View>
38 * </SwiperItem>
39 * <SwiperItem>
40 * <View className='demo-text-3'>3</View>
41 * </SwiperItem>
42 * </Swiper>
43 * )
44 * }
45 * }
46 * ```
47 * @example_vue
48 * ```html
49 * <template>
50 * <swiper
51 * class='test-h'
52 * indicator-color='#999'
53 * indicator-active-color='#333'
54 * :vertical="true"
55 * :circular="true"
56 * :indicator-dots="true"
57 * :autoplay="true"
58 * >
59 * <swiper-item>
60 * <view class='demo-text-1'>1</view>
61 * </swiper-item>
62 * <swiper-item>
63 * <view class='demo-text-2'>2</view>
64 * </swiper-item>
65 * <swiper-item>
66 * <view class='demo-text-3'>3</view>
67 * </swiper-item>
68 * </swiper>
69 * </template>
70 * ```
71 * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
72 */
73declare const SwiperItem: ComponentType<SwiperItemProps>
74export { SwiperItem, SwiperItemProps }