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

React

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>
    )
  }
}

Vue

  <movable-area style='height: 200px; width: 200px; background: red;'>
    <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>move me</movable-view>
  </movable-area>

MovableViewProps

Property	Type	Default	Required	Description
direction	"all" | "vertical" | "horizontal" | "none"	none	No	The moving direction of movable-view. Its values include "all", "vertical", "horizontal", and "none".
inertia	boolean	false	No	Specifies whether movable-view has inertia.
outOfBounds	boolean	false	No	Specifies whether movable-view can move after the view container is out of the movable area.
x	string | number		否	Specifies 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.
y	string | number		No	Specifies 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.
damping	number	20	No	The 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.
friction	number	2	No	The 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.
disabled	boolean	false	No	Specifies whether to disable the component.
scale	boolean	false	No	Specifies whether to support two-finger scaling. The effective area for scaling gestures falls within the movable-view by default.
scaleMin	number	0.5	No	The minimum value of the scaling level.
scaleMax	number	10	No	The maximum value of the scaling level.
scaleValue	number	1	No	The scale level. Its values range from 0.5 to 10.
animation	boolean	true	No	Specifies whether to use animations.
onChange	BaseEventOrigFunction<onChangeEventDeatil>		No	An event triggered during dragging.
onScale	BaseEventOrigFunction<onScaleEventDeatil>		No	An event triggered during scaling.
onHTouchMove	TouchEventFunction		No	An 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.
onVTouchMove	TouchEventFunction		No	An 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			No	Triggered at the start of dragging
onDragEnd			No	Triggered at the end of dragging

Property Support

Property	WeChat Mini-Program	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	✔️
MovableViewProps.onDragStart			✔️
MovableViewProps.onDragEnd			✔️

TChangeSource

Events triggered during dragging.

Param	Description
touch	Dragging
touch-out-of-bounds	The movable range is exceeded.
out-of-bounds	Pullback after the movable range is exceeded.
friction	Inertia
	setData

onChangeEventDeatil

Param	Type	Description
x	number	X coordinate
y	number	Y coordinate
source	"" | "touch" | "touch-out-of-bounds" | "out-of-bounds" | "friction"	Trigger events

onScaleEventDeatil

Param	Type	Description
x	number	X coordinate
y	number	Y coordinate
scale	number	Scaling number

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	H5	React Native
MovableView	✔️	✔️	✔️		✔️