跳到主要内容
版本:4.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"nonemovable-view 的移动方向,属性值有allverticalhorizontalnone
inertiabooleanfalsemovable-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 hybrid
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缩放比例