It is supported starting from the 1.11.0 basic library. For earlier versions, compatibility handling is required. For details, see About the Mini-program Basic Library.
movable-area
Movable area of movable-view
.
Note: The
width
and height
attributes of movable-area must be configured. If not specified, the default value is 10px.
movable-view
Movable view container, which can be dragged to slide on the page.
Attribute | Type | Default value | Description | Minimum version |
---|---|---|---|---|
direction | String | none | Moving direction of movable-view. The value can be all , vertical , horizontal , or none . |
- |
x | Number | 0 | Offset in the X-axis direction, which is converted to the left property. If the value of X is not in the movable range, it automatically moves to the movable range. |
- |
y | Number | 0 | Offset in the Y-axis direction, which is converted to the top property. If the value of Y is not in the movable range, it automatically moves to the movable range. |
- |
disabled | Boolean | false | Whether to disable the button. | - |
onTouchStart | EventHandle | - | Start the touch action. | 1.11.5 |
onTouchMove | EventHandle | - | Move after the touch action. | 1.11.5 |
onTouchEnd | EventHandle | - | End the touch action. | 1.11.5 |
onTouchCancel | EventHandle | - | Tapping action interrupted by call reminder or pop-up window. | 1.11.5 |
onChange | EventHandle | - | Event triggered during dragging. event.detail = {x: x, y: y, source: source} , where “source” indicates the cause of the movement. The value can be touch (drag). |
- |
onChangeEnd | EventHandle | - | Event triggered after dragging. event.detail = {x: x, y: y} |
- |
Code sample
<movable-area style="width: 100px;height: 100px;background-color: red;margin-left: 100px;">
<movable-view
onChange="onMovableViewChange"
onChangeEnd="onMovableViewChangeEnd"
direction="vertical"
x="{{10}}"
y="{{10}}"
style="width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.5);"
>
<view onTap="onTapMovableView">movable-view</view>
</movable-view>
</movable-area>
Note
- The width and height attributes of
movable-view
must be configured. If not specified, the default value is 10 px. - By default,
movable-view
uses absolute positioning (do not modify it). The values of top and left are 0 px. - If the value of
movable-view
is smaller than that ofmovable-area
, the movable area ofmovable-view
is withinmovable-area
. If the value ofmovable-view
is larger than that ofmovable-area
, the movable area ofmovable-view
must covermovable-area
. X-axis and Y-axis need to be considered separately. movable-view
must be in the<movable-area/>
component and must be a direct child node. Otherwise, it cannot move.