全部产品

movable-view

更新时间:2020-03-25 20:18:43

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

movable-area

movable-view 的可移动区域。

注意:movable-area 必须设置widthheight属性,不设置默认为10px

movable-view

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

属性名 类型 默认值 描述 最低版本
direction String none movable-view的移动方向,属性值有 allverticalhorizontalnone -
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} -

示例代码

  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 必须在 <movable-area/> 组件中,并且必须是直接子节点,否则不能移动。