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

参考文档

类型

  1. ComponentType<MovableViewProps>

示例代码

  1. class App extends Components {
  2. render () {
  3. return (
  4. <MovableArea style='height: 200px; width: 200px; background: red;'>
  5. <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
  6. </MovableArea>
  7. )
  8. }
  9. }

MovableViewProps

参数类型默认值必填说明
direction“all” | “vertical” | “horizontal” | “none”nonemovable-view 的移动方向,属性值有allverticalhorizontalnone
inertiabooleanfalsemovable-view 是否带有惯性
outOfBoundsbooleanfalse超过可移动区域后,movable-view 是否还可以移动
xstring | number定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围;改变 x 的值会触发动画
ystring | number定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画
dampingnumber20阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
frictionnumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于 0,否则会被设置成默认值
disabledbooleanfalse是否禁用
scalebooleanfalse是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内
scaleMinnumber0.5定义缩放倍数最小值
scaleMaxnumber10定义缩放倍数最大值
scaleValuenumber1定义缩放倍数,取值范围为 0.5 - 10
animationbooleantrue是否使用动画
onChangeBaseEventOrigFunction<onChangeEventDeatil>拖动过程中触发的事件
onScaleBaseEventOrigFunction<onScaleEventDeatil>缩放过程中触发的事件
onHTouchMoveTouchEventFunction初次手指触摸后移动为横向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch
onVTouchMoveTouchEventFunction初次手指触摸后移动为纵向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch

API 支持度

API微信小程序H5React Native
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.onScale✔️
MovableViewProps.onHTouchMove✔️
MovableViewProps.onVTouchMove✔️

TChangeSource

拖动过程中触发的事件

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

onChangeEventDeatil

参数类型说明
xnumberX 坐标
ynumberY 坐标
source“” | “touch” | “touch-out-of-bounds” | “out-of-bounds” | “friction”触发事件

onScaleEventDeatil

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

API 支持度

API微信小程序百度小程序支付宝小程序H5React Native
MovableView✔️✔️✔️