Swiper 滑动视图容器


滑块视图容器,常用于走马灯、轮播图

使用指南

在 Taro 文件中引入组件

注意,这边引入的是 taro 的基础组件库

  1. import { Swiper, SwiperItem } from '@tarojs/components'

示例

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

Swiper 参数

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

Swiper滑动视图容器 - 图1