Version: next

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" | "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微信小程序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

参数类型说明
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微信小程序百度小程序支付宝小程序H5React Native
MovableView✔️✔️✔️