Swiper
Swiper view container. Only the swiper-item component can be placed in it. Otherwise, undefined behavior will occur.
Type
ComponentType<SwiperProps>
Examples
- React
- Vue
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>
)
}
}
<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>
SwiperProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
indicatorDots | boolean | false | No | Specifies whether to display the indicator of the panel. |
indicatorColor | string | "rgba(0, 0, 0, .3)" | No | The color of the indicator. |
indicatorActiveColor | string | "#000000" | No | The color of the currently selected indicator. |
autoplay | boolean | false | No | Specifies whether to enable auto switching. |
current | number | 0 | No | The index of the current swiper. |
currentItemId | string | "" | No | The item-id of the current swiper cannot be specified at the same time as current. |
interval | number | 5000 | No | The interval of auto switching. |
duration | number | 500 | No | Duration of the swiping animation. |
circular | boolean | false | No | Specifies whether to use circular swiping. |
vertical | boolean | false | No | Specifies whether to swipe vertically. |
previousMargin | string | "0px" | No | The previous margin. It can be used to expose a small section of the previous item. Values in both px and rpx are supported. |
nextMargin | string | "0px" | No | The next margin. It can be used to expose a small section of the next item. Values in both px and rpx are supported. |
displayMultipleItems | number | 1 | No | The number of swipers displayed concurrently. |
skipHiddenItemLayout | boolean | false | No | Specifies whether to skip the swiper block that is not displayed. When it is set to true, the swiping performance in complex cases can be optimized, but the layout information of the hidden swiper block will be discarded. |
easingFunction | "default" | "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "default" | No | Specifies the animation easing type for the swiper. |
onChange | BaseEventOrigFunction<onChangeEventDeatil> | No | A change event triggered when the value of the current component changes. | |
onTransition | BaseEventOrigFunction<onTransitionEventDetail> | No | A transition event triggered when the location of the swiper-item component changes. | |
onAnimationFinish | BaseEventOrigFunction<onChangeEventDeatil> | No | An animationfinish event triggered when an animation ends. |
Property Support
Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
SwiperProps.indicatorDots | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.indicatorColor | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.indicatorActiveColor | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.autoplay | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.current | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.interval | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.duration | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
SwiperProps.circular | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.vertical | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.previousMargin | ✔️ | ✔️ | ||||
SwiperProps.nextMargin | ✔️ | ✔️ | ||||
SwiperProps.displayMultipleItems | ✔️ | ✔️ | ✔️ | ✔️ | ||
SwiperProps.skipHiddenItemLayout | ✔️ | ✔️ | ||||
SwiperProps.easingFunction | ✔️ | |||||
SwiperProps.onChange | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
SwiperProps.onTransition | ✔️ | |||||
SwiperProps.onAnimationFinish | ✔️ | ✔️ | ✔️ | ✔️ |
TChangeSource
Reasons for change.
Property | Description |
---|---|
autoplay | Autoplay |
touch | User paddle |
Other reasons |
TEasingFunction
Valid values of easing-function
Value | Description |
---|---|
default | Default easing function |
linear | Linear animation |
easeInCubic | Ease-in animation |
easeOutCubic | Ease-out animation |
easeInOutCubic | Ease-in and ease-out animations |
onChangeEventDeatil
Param | Type | Description |
---|---|---|
current | number | The index of the current swiper. |
source | "" | "autoplay" | "touch" | Reasons for change. |
onTransitionEventDetail
Param | Type | Description |
---|---|---|
dx | number | X-coordinate |
dy | number | Y-coordinate |
API Support
API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
Swiper | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
NOTE
- Do not set the style attribute for
SwiperItem
, you can set the style via class. 7147