视图容器movable-view有哪些属性,如何使用_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

基础库 1.11.0 开始支持，低版本需做兼容处理，操作参见小程序基础库说明。

movable-area

movable-view 的可移动区域。

注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px。

movable-view

可移动的视图容器，在页面中可以拖拽滑动。

属性名	类型	默认值	描述	最低版本
direction	String	none	movable-view的移动方向，属性值有 `all`、`vertical`、`horizontal`、`none`。	-
x	Number	0	定义 X 轴方向的偏移，会换算为 `left` 属性，如果 X 的值不在可移动范围内，会自动移动到可移动范围。	-
y	Number	0	定义 Y 轴方向的偏移，会换算为 `top` 属性，如果 Y 的值不在可移动范围内，会自动移动到可移动范围。	-
disabled	Boolean	false	是否禁用	-
onTouchStart	EventHandle	-	触摸动作开始	1.11.5
onTouchMove	EventHandle	-	触摸后移动	1.11.5
onTouchEnd	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}`	-

示例代码

<movable-area style="width: 100px;height: 100px;background-color: red;margin-left: 100px;">
  <movable-view
    onChange="onMovableViewChange"
    onChangeEnd="onMovableViewChangeEnd"
    direction="vertical"
    x="{{10}}"
    y="{{10}}"
    style="width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.5);"
  >
    <view onTap="onTapMovableView">movable-view</view>
  </movable-view>
</movable-area>

注意事项

movable-view 必须设置 width 和 height 属性，不设置默认为 10 px。
movable-view 默认为绝对定位（请勿修改），top 和 left 属性为 0 px。
当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内；当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（X 轴方向和 Y 轴方向分开考虑）。
movable-view 必须在 <movable-area/> 组件中，并且必须是直接子节点，否则不能移动。