swiper

更新时间：2024-09-18 14:46:36

基础库1.26.1开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为

属性

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-style	'dot' | 'common'	'dot'	否	指示点样式，默认为dot
indicator-color	string	''	否	指示点颜色, indicatorStyle='dot'时默认值为#C6C6C6, indicatorStyle='common'时默认值为#ffffff80
indicator-active-color	string	''	否	当前选中的指示点颜色,indicatorStyle='dot'时默认值为#000000, indicatorStyle='common'时默认值为#ffffff
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
easing-function	'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'	'default'	否	指定 swiper 切换缓动动画类型
placement	'inner' | 'outer'	'inner'	否	指定指示器位置
indicator-show-number	number | 'fit'	5	否	指定指示器显示个数，默认为5，为"fit"为当前SwiperItem个数。仅对indicatorStyle="dot"生效
bindchange	(e: { detail: { current: number, source: 'touch' | 'autoplay' } } & Event) => void		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	(e: { detail: { dx: number, dy: number } } & Event) => void		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	(e: { detail: { dx: number, dy: number } } & Event) => void		否	动画结束时会触发 animationfinish 事件，event.detail 同上

easingFunction

指定 swiper 切换缓动动画类型

值	说明
'default'	默认缓动函数
'linear'	线性动画
'easeInCubic'	缓入动画
'easeOutCubic'	缓出动画
'easeInOutCubic'	缓入缓出动画

source

值	说明
'autoplay'	自动播放导致swiper变化
'touch'	用户划动引起swiper变化

Bug & Tip

1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
2. tip: 存在属性与控制限制 (opens new window)

扫码体验

示例代码