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 | 当前所在滑块的 index | Number | - | 0 |
√ | √ | circular | 是否采用衔接滑动 | Boolean | - | false |
√ | skipHiddenItemLayout | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 | Boolean | - | false | |
√ | displayMultipleItems | 同时显示的滑块数量 | Number | - | 1 | |
√ | vertical | 滑动方向是否为纵向 | Boolean | - | false | |
√ | √ | onChange | current 改变时会触发 change 事件 | EventHandle | - | - |
√ | onAnimationfinish | 动画结束时会触发 animationfinish 事件 | EventHandle | - | - |