开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 组件 > 视图容器 > movable-view 可移动视图容器
贡献者 3
收藏
订阅更新
我的文档
设置
简介
可移动的视图容器,在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。
使用限制
版本要求基础库 1.11.0 及以上,若版本较低,建议做 兼容处理
native 渲染引擎:暂不支持。可以通过 my.caniuse('movable-view') 判断是否支持。
movable-view 必须设置 width 和 height 属性,不设置默认为 10px。
movable-view 默认为绝对定位(请不要修改),top 和 left 属性为 0px。
当 movable-view 小于 movable-area 时,movable-view 的移动范围是在 movable-area 内;当 movable-view 大于 movable-area 时,movable-view 的移动范围必须包含 movable-area (x 轴方向和 y 轴方向分开考虑)。
扫码体验

使用
在线示例

属性说明
属性
类型
描述
direction
string
movable-view 的移动方向,属性值有 all
vertical
horizontal
none
默认值: none
inertia
boolean
movable-view 是否带有惯性。 默认值: false 版本要求: 基础库 1.20.0
及以上
out-of-bounds
boolean
超过可移动区域后,movable-view 是否还可以移动。 默认值: false 版本要求: 基础库 1.20.0
及以上
x
number
定义 x 轴方向的偏移,会换算为 left 属性,如果 x 的值不在可移动范围内,会自动移动到可移动范围。 默认值: 0
y
number
定义 y 轴方向的偏移,会换算为 top 属性,如果 y 的值不在可移动范围内,会自动移动到可移动范围。 默认值: 0
damping
number
阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画,值越大移动越快。 默认值: 20 版本要求: 基础库 1.20.0
及以上
friction
number
摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于 0,否则会被设置成默认值。 默认值: 2 版本要求: 基础库 1.20.0
及以上
disabled
boolean
是否禁用。 默认值: false
scale
boolean
是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内。 默认值: false 版本要求: 基础库 1.20.0
及以上
scale-min
number
定义缩放倍数最小值。 默认值: 0.5 版本要求: 基础库 1.20.0
及以上
scale-max
number
定义缩放倍数最大值。 默认值: 10 版本要求: 基础库 1.20.0
及以上
scale-value
number
定义缩放倍数,取值范围为 0.5 - 10。 默认值: 1 版本要求: 基础库 1.20.0
及以上
animation
boolean
是否使用动画。 默认值: false 版本要求: 基础库 1.20.0
及以上
ontouchstart
eventhandle
触摸动作开始,事件会向父节点传递。 版本要求: 基础库 1.11.5
及以上
catchtouchstart
eventhandle
触摸动作开始,事件仅作用于组件,不向父节点传递。 版本要求: 基础库 1.11.5
及以上
ontouchmove
eventhandle
触摸移动事件,事件会向父节点传递。 版本要求: 基础库 1.11.5
及以上
catchtouchmove
eventhandle
触摸移动事件,事件仅作用于组件,不向父节点传递。 版本要求: 基础库 1.11.5
及以上
ontouchend
eventhandle
触摸动作结束,事件会向父节点传递。 版本要求: 基础库 1.11.5
及以上
catchtouchend
eventhandle
触摸动作结束,事件仅作用于组件,不向父节点传递。 版本要求: 基础库 1.11.5
及以上
ontouchcancel
eventhandle
触摸动作被打断,如来电提醒、弹窗。 版本要求: 基础库 1.11.5
及以上
onchange
eventhandle
拖动过程中触发的事件,event.detail = {x: x, y: y, source: source}
,其中 source 表示产生移动的原因,值可为 touch(拖动)。
onchangeend
eventhandle
拖动结束触发的事件,event.detail = {x: x, y: y}

onscale
eventhandle
缩放过程中触发的事件,event.detail = {x, y, scale
}。 版本要求: 基础库 1.20.0
及以上
onchange 返回值 detail.source
source 字段表示产生移动的原因
属性
描述
touch
拖动。
touch-out-of-bounds
超出移动范围。
out-of-bounds
超出移动范围后的回弹。
friction
惯性。
空字符串
setdata。
说明: 冒泡事件,请查看 事件介绍 中的 事件类型
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图