This page is translated by Google Cloud Translation API

Switch to Chinese

movable-area

draggable area

Since the architecture of the app and applet is that the logic layer is separated from the view layer, using js to monitor and drag will cause frequent communication between the logic layer and the view layer, affecting performance. In order to facilitate high-performance dragging, the platform encapsulates the movable-area component.

movable-area refers to the draggable area, and the movable-view component is embedded in it to indicate the draggable area.

That is, finger/mouse hold down movable-view to drag or pinch to zoom, but cannot drag the range specified by movable-area.

Of course, instead of dragging, you can use code to trigger the move and zoom of movable-view in movable-area.

movable-view的规范另见movable-view。

Platform Difference Description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序	飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	√	√	√	√	√	x	√	√	√	√	√

Property description

property name	type	default value	description
scale-area	Boolean	false	When the movable-view inside is set to support two-finger zooming, setting this value can modify the effective area of the zoom gesture to the entire movable-area

Note: movable-area must set the width and height properties, if not set the default is 10px

• The movable-area app-nvue platform currently does not support gesture zooming and conflicts with scrolling.