跳到主要内容
版本：3.x

MovableView

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

支持情况：

参考文档

类型​

ComponentType<MovableViewProps>

示例代码​

class App extends Components {
  render () {
    return (
      <MovableArea style='height: 200px; width: 200px; background: red;'>
        <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
      </MovableArea>
    )
  }
}

MovableViewProps​

参数类型默认值必填说明
direction"all" or "vertical" or "horizontal" or "none"none否movable-view 的移动方向，属性值有all、vertical、horizontal、none
inertiabooleanfalse否movable-view 是否带有惯性
outOfBoundsbooleanfalse否超过可移动区域后，movable-view 是否还可以移动
xstring or number否定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
ystring or number否定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
dampingnumber20否阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
frictionnumber2否摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabledbooleanfalse否是否禁用
scalebooleanfalse否是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scaleMinnumber0.5否定义缩放倍数最小值
scaleMaxnumber10否定义缩放倍数最大值
scaleValuenumber1否定义缩放倍数，取值范围为 0.5 - 10
animationbooleantrue否是否使用动画
onChangeCommonEventFunction<onChangeEventDetail>否拖动过程中触发的事件
onChangeEndCommonEventFunction<onChangeEventDetail>否拖动结束触发的事件
onDragStartCommonEventFunction否开始拖动时触发
onDragEndCommonEventFunction否拖动结束时触发
onScaleCommonEventFunction<onScaleEventDetail>否缩放过程中触发的事件
onTouchStartCommonEventFunction否触摸动作开始，事件会向父节点传递。
onTouchMoveCommonEventFunction否触摸动作开始，事件仅作用于组件，不向父节点传递。
onTouchEndTouchEventFunction否手指触摸动作结束
onTouchCancelCommonEventFunction否触摸动作被打断，如来电提醒、弹窗。
onHTouchMoveTouchEventFunction否初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
onVTouchMoveTouchEventFunction否初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
catchTouchStartCommonEventFunction否触摸移动事件，事件仅作用于组件，不向父节点传递。
catchTouchMoveCommonEventFunction否触摸移动事件，事件仅作用于组件，不向父节点传递。
catchTouchEndCommonEventFunction否触摸动作结束，事件仅作用于组件，不向父节点传递。

API 支持度​

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序H5React NativeHarmonyHarmony hybridASCF元服务
MovableViewProps.direction✔️✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.inertia✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.outOfBounds✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.x✔️✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.y✔️✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.damping✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.friction✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.scale✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.scaleMin✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.scaleMax✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.scaleValue✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.animation✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.onChange✔️✔️✔️✔️✔️✔️
MovableViewProps.onChangeEnd✔️
MovableViewProps.onDragStart✔️
MovableViewProps.onDragEnd✔️
MovableViewProps.onScale✔️✔️✔️✔️✔️✔️✔️✔️
MovableViewProps.onTouchStart✔️
MovableViewProps.onTouchMove✔️
MovableViewProps.onTouchEnd✔️✔️(此事件的触发顺序会因为当前事件机制引起组件内外注册的事件执行顺序不正常，外部注册的事件可能会优先于内部执行，如需保证执行顺序一致，需要在回调函数中包裹 setTimeout 临时处理)✔️
MovableViewProps.onTouchCancel✔️
MovableViewProps.onHTouchMove✔️✔️✔️✔️✔️✔️
MovableViewProps.onVTouchMove✔️✔️✔️✔️✔️✔️
MovableViewProps.catchTouchStart✔️
MovableViewProps.catchTouchMove✔️
MovableViewProps.catchTouchEnd✔️

TChangeSource​

拖动过程中触发的事件

参数说明
touch拖动
touch-out-of-bounds超出移动范围
out-of-bounds超出移动范围后的回弹
friction惯性
setData

onChangeEventDetail​

参数类型说明
xnumberX 坐标
ynumberY 坐标
sourcekeyof TChangeSource触发事件

onScaleEventDetail​

参数类型说明
xnumberX 坐标
ynumberY 坐标
scalenumber缩放比例