title: MovableView

sidebar_label: MovableView

可移动的视图容器，在页面中可以拖拽滑动。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" none 否 movable-view 的移动方向，属性值有all、vertical、horizontal、none
inertia boolean false 否 movable-view 是否带有惯性
outOfBounds boolean false 否 超过可移动区域后，movable-view 是否还可以移动
x string | number 否 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
y string | number 否 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
damping number 20 否 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction number 2 否 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabled boolean false 否 是否禁用
scale boolean false 否 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scaleMin number 0.5 否 定义缩放倍数最小值
scaleMax number 10 否 定义缩放倍数最大值
scaleValue number 1 否 定义缩放倍数，取值范围为 0.5 - 10
animation boolean true 否 是否使用动画
onChange BaseEventOrigFunction<onChangeEventDeatil> 否 拖动过程中触发的事件
onScale BaseEventOrigFunction<onScaleEventDeatil> 否 缩放过程中触发的事件
onHTouchMove TouchEventFunction 否 初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
onVTouchMove TouchEventFunction 否 初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch

API 支持度

API 微信小程序 H5 React 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

参数 类型 说明
x number X 坐标
y number Y 坐标
source "" | "touch" | "touch-out-of-bounds" | "out-of-bounds" | "friction" 触发事件

onScaleEventDeatil

参数 类型 说明
x number X 坐标
y number Y 坐标
scale number 缩放比例

API 支持度

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