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

sidebar_label: Swiper
Type
Examples
SwiperProps
API Support
NOTE

title: Swiper

sidebar_label: Swiper

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

Reference

Type

ComponentType<SwiperProps>

Examples

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>

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