movable-view

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

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

开发者工具1.22.0开始支持

可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性

属性	类型	默认值	必填	说明
direction	'all' | 'vertical' | 'horizontal' | 'none'	'none'	否	movable-view 的移动方向，属性值有 all、vertical、horizontal、none
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view 是否还可以移动
x	number		否	定义 x 轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画；单位支持 px（默认）、rpx
y	number		否	定义 y 轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画；单位支持 px（默认）、rpx
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scale-min	number	0.5	否	定义缩放倍数最小值
scale-max	number	10	否	定义缩放倍数最大值
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10
animation	boolean	true	否	是否使用动画
bindchange	(e: { detail: { x: number, y: number, source: string } } & Event) => void		否	拖动过程中触发的事件，event.detail = {x, y, source}
bindscale	(e: { detail: { x: number, y: number, scale: number } } & Event) => void		否	缩放过程中触发的事件，event.detail = {x, y, scale}

bindchange 返回的 source 表示产生移动的原因

值	说明
'touch'	拖动
'touch-out-of-bounds'	超出移动范围
'out-of-bounds'	超出移动范围后的回弹
''	setData

1. tip: movable-view 必须设置 width 和 height 属性，不设置默认为 10px*10px
2. tip: movable-view 默认为绝对定位，top 和 left 属性为 0px

扫码体验

示例代码