Swiper

Swiper view container. Only the swiper-item component can be placed in it. Otherwise, undefined behavior will occur.

Reference

Type

ComponentType<SwiperProps>

Examples

React

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

Vue

<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