开发
API

swiper

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

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

代码示例

开发者工具中预览

属性说明

属性名类型默认值必填说明最低支持版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorstringrgba(0, 0, 0, .3)指示点颜色1.0.0
indicator-active-colorstringrgba(0, 0, 0, 0)当前选中的指示点颜色1.0.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前选中滑块的 index1.0.0
current-item-idstring""当前选中滑块的组件 id,不能与 current 属性同时指定1.0.0
intervalnumber5000自动切换时间间隔1.0.0
previous-marginstring""前边距,可以用露出前一项的一小部分,支持 px 和 rpx,默认单位是 px1.0.0
next-marginstring""后边距,可用于露出后一项的一小部分,支持 px 和 rpx,默认单位是 px1.0.0
display-multiple-itemsnumber1同时显示的滑块数量1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否循环播放(首尾衔接)1.0.0
verticalbooleanfalse滑块放置方向是否为竖直1.0.0
bindchangeeventhandle--current 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindanimationfinisheventhandle--动画结束时会触发 animationfinish 事件,event.detail = {dx, dy}1.0.0
bindtransitioneventhandle--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的重复调用。
点击纠错
评价此篇文档