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 - 触摸动作开始
onTouchMove EventHandle - 触摸后移动
onTouchEnd EventHandle - 触摸动作结束
onTouchCancel EventHandle - 触摸动作被打断，如来电提醒、弹窗
onChange EventHandle - 拖动过程中触发的事件，
event.detail = {x: x, y: y, source: source}
，其中 source 表示产生移动的原因，值可为 touch（拖动）。
onChangeEnd EventHandle - 拖动结束触发的事件，
event.detail = {x: x, y: y}

示例代码

  1. <movable-area style="width: 100px;height: 100px;background-color: red;margin-left: 100px;">
  2.   <movable-view
  3.     onChange="onMovableViewChange"
  4.     onChangeEnd="onMovableViewChangeEnd"
  5.     direction="vertical"
  6.     x="{{10}}"
  7.     y="{{10}}"
  8.     style="width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.5);"
  9.   >
  10.     <view onTap="onTapMovableView">movable-view</view>
  11.   </movable-view>
  12. </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必须在组件中，并且必须是直接子节点，否则不能移动。