1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 |
|
4 | interface SwiperProps extends StandardProps {
|
5 | /** 是否显示面板指示点
|
6 | * @default false
|
7 | * @supported weapp, swan, alipay, tt, h5, rn
|
8 | */
|
9 | indicatorDots?: boolean
|
10 |
|
11 | /** 指示点颜色
|
12 | * @default "rgba(0, 0, 0, .3)"
|
13 | * @supported weapp, swan, alipay, tt, h5, rn
|
14 | */
|
15 | indicatorColor?: string
|
16 |
|
17 | /** 当前选中的指示点颜色
|
18 | * @default "#000000"
|
19 | * @supported weapp, swan, alipay, tt, h5, rn
|
20 | */
|
21 | indicatorActiveColor?: string
|
22 |
|
23 | /** 是否自动切换
|
24 | * @default false
|
25 | * @supported weapp, swan, alipay, tt, h5, rn
|
26 | */
|
27 | autoplay?: boolean
|
28 |
|
29 | /** 当前所在滑块的 index
|
30 | * @default 0
|
31 | * @supported weapp, swan, alipay, tt, h5, rn
|
32 | */
|
33 | current?: number
|
34 |
|
35 | /** 当前所在滑块的 item-id ,不能与 current 被同时指定
|
36 | * @default ""
|
37 | */
|
38 | currentItemId?: string
|
39 |
|
40 | /** 自动切换时间间隔
|
41 | * @default 5000
|
42 | * @supported weapp, swan, alipay, tt, h5, rn
|
43 | */
|
44 | interval?: number
|
45 |
|
46 | /** 滑动动画时长
|
47 | * @default 500
|
48 | * @supported weapp, swan, alipay, tt, h5
|
49 | */
|
50 | duration?: number
|
51 |
|
52 | /** 是否采用衔接滑动
|
53 | * @default false
|
54 | * @supported weapp, swan, alipay, tt, h5, rn
|
55 | */
|
56 | circular?: boolean
|
57 |
|
58 | /** 滑动方向是否为纵向
|
59 | * @default false
|
60 | * @supported weapp, swan, alipay, tt, h5, rn
|
61 | */
|
62 | vertical?: boolean
|
63 |
|
64 | /** 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
|
65 | * @default "0px"
|
66 | * @supported weapp, h5, tt
|
67 | */
|
68 | previousMargin?: string
|
69 |
|
70 | /** 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
|
71 | * @default "0px"
|
72 | * @supported weapp, h5, tt
|
73 | */
|
74 | nextMargin?: string
|
75 |
|
76 | /**
|
77 | * 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素
|
78 | * @default false
|
79 | * @supported weapp
|
80 | */
|
81 | snapToEdge?: boolean
|
82 |
|
83 | /** 同时显示的滑块数量
|
84 | * @default 1
|
85 | * @supported weapp, swan, tt, h5
|
86 | */
|
87 | displayMultipleItems?: number
|
88 |
|
89 | /** 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
|
90 | * @default false
|
91 | * @supported weapp, swan
|
92 | */
|
93 | skipHiddenItemLayout?: boolean
|
94 |
|
95 | /** 指定 swiper 切换缓动动画类型
|
96 | * @default "default"
|
97 | * @supported weapp, tt
|
98 | */
|
99 | easingFunction?: keyof SwiperProps.TEasingFunction
|
100 |
|
101 | /** current 改变时会触发 change 事件
|
102 | * @supported weapp, swan, alipay, tt, h5, rn
|
103 | */
|
104 | onChange?: CommonEventFunction<SwiperProps.onChangeEventDetail>
|
105 |
|
106 | /** swiper-item 的位置发生改变时会触发 transition 事件
|
107 | * @supported weapp, tt
|
108 | */
|
109 | onTransition?: CommonEventFunction<SwiperProps.onTransitionEventDetail>
|
110 |
|
111 | /** 动画结束时会触发 animationfinish 事件
|
112 | * @supported weapp, swan, h5, rn, tt
|
113 | */
|
114 | onAnimationFinish?: SwiperProps['onChange']
|
115 |
|
116 | /** 是否禁止用户 touch 操作
|
117 | * @default false
|
118 | * @supported alipay
|
119 | */
|
120 | disableTouch?: boolean
|
121 | }
|
122 |
|
123 | declare namespace SwiperProps {
|
124 | /** 导致变更的原因 */
|
125 | interface TChangeSource {
|
126 | /** 自动播放 */
|
127 | autoplay
|
128 | /** 用户划动 */
|
129 | touch
|
130 | /** 其它原因 */
|
131 | ''
|
132 | }
|
133 |
|
134 | /** 指定 swiper 切换缓动动画类型 */
|
135 | interface TEasingFunction {
|
136 | /** 默认缓动函数 */
|
137 | default
|
138 | /** 线性动画 */
|
139 | linear
|
140 | /** 缓入动画 */
|
141 | easeInCubic
|
142 | /** 缓出动画 */
|
143 | easeOutCubic
|
144 | /** 缓入缓出动画 */
|
145 | easeInOutCubic
|
146 | }
|
147 |
|
148 | interface onChangeEventDetail {
|
149 | /** 当前所在滑块的索引 */
|
150 | current: number
|
151 | /** 导致变更的原因 */
|
152 | source: keyof SwiperProps.TChangeSource
|
153 | /** SwiperItem的itemId参数值 */
|
154 | currentItemId?: string
|
155 | }
|
156 |
|
157 | interface onTransitionEventDetail {
|
158 | /** X 坐标 */
|
159 | dx: number
|
160 | /** Y 坐标 */
|
161 | dy: number
|
162 | }
|
163 | }
|
164 |
|
165 | /** 滑块视图容器。其中只可放置 swiper-item 组件,否则会导致未定义的行为。
|
166 | * > 不要为 `SwiperItem` 设置 **style** 属性,可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
|
167 | * @classification viewContainer
|
168 | * @supported weapp, swan, alipay, tt, h5, rn
|
169 | * @example_react
|
170 | * ```tsx
|
171 | * class App extends Component {
|
172 | * render () {
|
173 | * return (
|
174 | * <Swiper
|
175 | * className='test-h'
|
176 | * indicatorColor='#999'
|
177 | * indicatorActiveColor='#333'
|
178 | * vertical
|
179 | * circular
|
180 | * indicatorDots
|
181 | * autoplay>
|
182 | * <SwiperItem>
|
183 | * <View className='demo-text-1'>1</View>
|
184 | * </SwiperItem>
|
185 | * <SwiperItem>
|
186 | * <View className='demo-text-2'>2</View>
|
187 | * </SwiperItem>
|
188 | * <SwiperItem>
|
189 | * <View className='demo-text-3'>3</View>
|
190 | * </SwiperItem>
|
191 | * </Swiper>
|
192 | * )
|
193 | * }
|
194 | * }
|
195 | * ```
|
196 | * @example_vue
|
197 | * ```html
|
198 | * <template>
|
199 | * <swiper
|
200 | * class='test-h'
|
201 | * indicator-color='#999'
|
202 | * indicator-active-color='#333'
|
203 | * :vertical="true"
|
204 | * :circular="true"
|
205 | * :indicator-dots="true"
|
206 | * :autoplay="true"
|
207 | * >
|
208 | * <swiper-item>
|
209 | * <view class='demo-text-1'>1</view>
|
210 | * </swiper-item>
|
211 | * <swiper-item>
|
212 | * <view class='demo-text-2'>2</view>
|
213 | * </swiper-item>
|
214 | * <swiper-item>
|
215 | * <view class='demo-text-3'>3</view>
|
216 | * </swiper-item>
|
217 | * </swiper>
|
218 | * </template>
|
219 | * ```
|
220 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
|
221 | */
|
222 | declare const Swiper: ComponentType<SwiperProps>
|
223 |
|
224 | export { Swiper, SwiperProps }
|