swiper

基础库 1.0.0 开始支持本组件。

滑块视图容器，内部只允许使用 <swiper-item> 组件来描述具体滑块内容，否则会导致未定义的行为。

代码示例

开发者工具中预览

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	string	rgba(0, 0, 0, .3)	否	指示点颜色	1.0.0
indicator-active-color	string	rgba(0, 0, 0, 0)	否	当前选中的指示点颜色	1.0.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前选中滑块的 index	1.0.0
current-item-id	string	""	否	当前选中滑块的组件 id，不能与 current 属性同时指定	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
previous-margin	string	""	否	前边距，可以用露出前一项的一小部分，支持 px 和 rpx，默认单位是 px	1.0.0
next-margin	string	""	否	后边距，可用于露出后一项的一小部分，支持 px 和 rpx，默认单位是 px	1.0.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否循环播放（首尾衔接）	1.0.0
vertical	boolean	false	否	滑块放置方向是否为竖直	1.0.0
bindchange	eventhandle	--	否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindanimationfinish	eventhandle	--	否	动画结束时会触发 animationfinish 事件，event.detail = {dx, dy}	1.0.0
bindtransition	eventhandle	--	否	swiper-item 产生位移时触发 transition 事件，event.detail = {dx, dy}	1.20.0

change 事件的source 返回值

change 事件中的source字段，表示触发 change 事件的原因，枚举值如下：

值	说明
autoplay	自动播放导致 <swiper> 切换
touch	用户划动导致 <swiper> 切换
""	其他原因

扫码体验

请使用字节宿主APP扫码

Bug & Tip

• Tip：其中只可放置 <swiper-item> 组件，否则会导致未定义的行为。
• Tip：如果在 bindchange 的回调函数中使用setData来改变 current 值，请在使用前判断source字段，避免setData的重复调用。