开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 组件 > 视图容器 > swiper 滑块视图容器
贡献者 5
收藏
订阅更新
我的文档
设置
简介
滑块视图容器。其中仅可放置 swiper-item,否则会导致未定义的行为。 swiper 的高度可以通过设置 swiper-item 元素高度来控制,也可以通过设置 swiper 的整体高度来控制(通过组件的 adjust-height 属性来具体实现)。
使用限制
swiper 组件不可以放在地图上用,map 组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法在原生组件之上。
swiper 组件的首张图片与左边的间隔可以和组件中 item 的图片间隔保持一致,可以根据 previous-margin 设置一下前边距。
调用 swiper 组件,swiper-item 嵌套 cover-view 会导致最后一个 swiper-item 后有很大的空白,且 swiper-item 不能添加事件,建议使用 view 做嵌套。
swiper 可以有多个 swiper-item,但是前台完整展示的只有一个。
扫码体验

使用
在线示例

属性说明
表格中 “-” 代表支持。
属性
类型
描述
webview 兼容性
native 兼容性
indicator-dots
boolean
是否显示指示点。 默认值: false
-
-
indicator-color
color
指示点颜色。 默认值: rgba(0, 0, 0, .3)
-
-
indicator-active-color
color
当前选中的指示点颜色。 默认值:#000
-
-
active-class
string
swiper-item
可见时的 class

基础库 1.13.7
-
changing-class
string
acceleration
设置为 {{true}}
时且处于滑动过程中,中间若干屏处于可见时的 class

基础库 1.13.7
-
autoplay
boolean
是否自动切换。 默认值: false
-
-
current
number
当前页面的 index,可以增加左右箭头来控制轮播滚动。 默认值: 0
-
-
duration
number
滑动动画时长。 默认值: 500(ms)
-
-
interval
number
自动切换时间间隔。 默认值: 5000(ms)
-
-
circular
boolean
是否启用无限滑动。 默认值: false
-
-
vertical
boolean
滑动方向是否为纵向。 默认值: false
-
-
previous-margin
string
前边距,单位 px,1.9.0 暂时只支持水平方向。 默认值: 0px 说明: 去除 previous-margin
的设置距离可删除 swiper 组件左右空白距离。
基础库 1.9.0
基础库 2.9.7 ,android 暂不支持
next-margin
string
后边距,单位 px,1.9.0 暂时只支持水平方向。 默认值: 0px 说明: 去除 next-margin
的设置距离可删除 swiper 组件左右空白距离。
基础库 1.9.0
基础库 2.9.7 ,android 暂不支持
acceleration
boolean
当开启时,会根据滑动速度,连续滑动多屏。 默认值: false
基础库 1.13.7
-
disable-programmatic-animation
boolean
是否禁用代码变动触发 swiper 切换时使用动画。 默认值: false
基础库 1.13.7
-
onchange
eventhandle
current 改变时会触发,event.detail = {current, ischanging}
,其中 ischanging
acceleration
设置为 {{true}}
时才有值,当连续滑动多屏时,中间若干屏触发 onchange
事件时 ischanging
true
,最后一屏返回 false

基础库 1.15.0
-
ontransition
eventhandle
swiper 中 swiper-item 的位置发生改变时会触发 transition 事件。 其中{dx,dy} = event.detail 基础库 2.6.0
开始支持。
-
暂不支持
onanimationend
eventhandle
动画结束时会触发 animationend 事件,event.detail = {current, source}
,其中 source
的值有 autoplay
touch

基础库 1.15.0
暂不支持
disable-touch
boolean
是否禁止用户 touch 操作。 默认值: false
基础库 1.15.0
-
swipe-ratio
number
滑动距离阈值,当滑动距离超过阈值时进行 swiper-item 切换。 默认值:0.2
基础库 1.24.11
-
swipe-speed
number
滑动综合速度阈值,当超过阈值时进行 swiper-item 切换,数值越小越敏感。 默认值:0.05
基础库 1.24.11
-
touch-angle
number
计算用户手势时所依赖的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高。 默认值:45
基础库 1.24.11
-
display-multiple-items
number
同时显示的滑块数量。 默认值:1
基础库 2.6.4
-
easing-function
string
切换缓动动画类型。 默认值:default 属性值有default
linear
easeincubic
easeoutcubic
easeinoutcubic
基础库 2.6.4
-
snap-to-edge
boolean
当 swiper-item 个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 时,可以指定这个边距是否应用到第一个、最后一个元素。 默认值:false
基础库 2.6.4
-
adjust-height
string
自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时,默认不调整。可选值为:
first:第一个滑块。
current:实时的当前滑块。
highest:高度最大的滑块。
none:不根据滑块调整高度,容器高度取决于自身样式。
默认值:first
基础库 2.6.4
-
adjust-vertical-height
boolean
vertical 为 true 时强制使 adjust-height 生效。 默认值:false
基础库 2.6.4
-
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图