English
English
# 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 | √ | √ | √ | √ | √ | √ | √ |
HarmonyOS
| HarmonyOS |
|---|
| HBuilderX 4.23 |
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 |
注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px
- movable-area app-nvue平台 暂不支持手势缩放，并且和滚动冲突。