qrcode
扫描二维码查看演示效果
qrcode
扫描二维码查看演示效果
wxapp

Swiper 滑动视图容器


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

使用指南

在 Taro 文件中引入组件

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

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

示例

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