Skip to main content
Version: Next

MovableView

A movable view container. It can be dragged to move on a page. The movable-view component must be included in the movable-area component. It must be a direct child node. Otherwise, the component cannot move.

Reference

Type

ComponentType<MovableViewProps>

Examples

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

MovableViewProps

PropertyTypeDefaultRequiredDescription
direction"all" | "vertical" | "horizontal" | "none"noneNoThe moving direction of movable-view. Its values include "all", "vertical", "horizontal", and "none".
inertiabooleanfalseNoSpecifies whether movable-view has inertia.
outOfBoundsbooleanfalseNoSpecifies whether movable-view can move after the view container is out of the movable area.
xstring | numberSpecifies the offset in the x-axis direction. If the value of x is not within the movable range, the component will automatically move to the movable range. A change to the value of x will trigger an animation.
ystring | numberNoSpecifies the offset in the y-axis direction. If the value of y is not within the movable range, the component will automatically move to the movable range. A change to the value of y will trigger an animation.
dampingnumber20NoThe damping coefficient, which is used to control the animation triggered when the value of x or y changes and the animation that is pulled back when the component exceeds the range. The higher value leads to faster movement.
frictionnumber2NoThe friction coefficient, which is used to control the animation that moves due to inertia. The higher value leads to higher friction and indicates that the movement stops earlier. It must be greater than 0. Otherwise it will be set to the default value.
disabledbooleanfalseNoSpecifies whether to disable the component.
scalebooleanfalseNoSpecifies whether to support two-finger scaling. The effective area for scaling gestures falls within the movable-view by default.
scaleMinnumber0.5NoThe minimum value of the scaling level.
scaleMaxnumber10NoThe maximum value of the scaling level.
scaleValuenumber1NoThe scale level. Its values range from 0.5 to 10.
animationbooleantrueNoSpecifies whether to use animations.
onChangeBaseEventOrigFunction<onChangeEventDeatil>NoAn event triggered during dragging.
onScaleBaseEventOrigFunction<onScaleEventDeatil>NoAn event triggered during scaling.
onHTouchMoveTouchEventFunctionNoAn event triggered when the component is first touched by a finger and then moved in the horizontal direction. If this event is caught, it indicates that the touchmove event is also caught.
onVTouchMoveTouchEventFunctionNoAn event triggered when the component is first touched by a finger and then moved in the vertical direction. If this event is caught, it indicates that the touchmove event is also caught.
onDragStart NoTriggered at the start of dragging
onDragEnd NoTriggered at the end of dragging

Property Support

PropertyWeChat Mini-ProgramH5React 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✔️
MovableViewProps.onDragStart✔️
MovableViewProps.onDragEnd✔️

TChangeSource

Events triggered during dragging.

ParamDescription
touchDragging
touch-out-of-boundsThe movable range is exceeded.
out-of-boundsPullback after the movable range is exceeded.
frictionInertia
setData

onChangeEventDeatil

ParamTypeDescription
xnumberX coordinate
ynumberY coordinate
source"" | "touch" | "touch-out-of-bounds" | "out-of-bounds" | "friction"Trigger events

onScaleEventDeatil

ParamTypeDescription
xnumberX coordinate
ynumberY coordinate
scalenumberScaling number

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React Native
MovableView✔️✔️✔️✔️