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

sidebar_label: Swiper
- 滑块视图容器
  - 示例：

title: Swiper

sidebar_label: Swiper

滑块视图容器

属性

属性名	类型	默认值	说明
indicatorDots	Boolean	false	是否显示面板指示点
indicatorColor	String	rgba(0, 0, 0, .3)	指示点颜色
indicatorActiveColor	String	000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
current	Number	0	当前所在滑块的 index
onChange	EventHandle		current 改变时会触发 change 事件
circular	Boolean	false	是否采用衔接滑动
skipHiddenItemLayout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
displayMultipleItems	Number	1	同时显示的滑块数量
vertical	Boolean	false	滑动方向是否为纵向
onAnimationfinish	EventHandle		动画结束时会触发 animationfinish 事件

各端支持度

属性	微信小程序	H5	ReactNative	百度小程序	支付宝小程序	字节跳动小程序
indicatorDots	✔	✔	✔	✔	✔	✔
indicatorColor	✔	✔	✔	✔	✔	✔
indicatorActiveColor	✔	✔	✔	✔	✔	✔
autoplay	✔	✔	✔	✔	✔	✔
interval	✔	✔	✔	✔	✔	✔
duration	✔	✔	x	✔	✔	✔
current	✔	✔	✔	✔	✔	✔
onChange	✔	✔	✔	✔	✔	✔
circular	✔	✔	✔	✔	✔	✔
skipHiddenItemLayout	✔		x	✔
displayMultipleItems	✔		x	✔		✔
vertical	✔	✔	✔	✔	✔	✔
onAnimationfinish	✔	✔	✔	✔

示例：

import Taro, { Component } from '@tarojs/taro'
// 引入 Swiper, SwiperItem 组件
import { Swiper, SwiperItem, View } from '@tarojs/components'
class App extends Components {
  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>
    )
  }
}