Represents a movable view container that can be dragged to slide across the page.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
direction | string | none | No | Moving direction of movable-view. The value can be all, vertical, horizontal, or none. |
inertia | boolean | false | No | Whether movable-view has inertia. |
out-of-bounds | boolean | false | No | Whether movable-view can move beyond the movable area. |
x | number | - | No | X-axis offset. If the x value is outside the movable range, it will be automatically clamped to the nearest valid boundary. Changing the x value triggers an animation. |
y | number | - | No | Y-axis offset. If the y value is outside the movable range, it will be automatically clamped to the nearest valid boundary. Changing the y value triggers an animation. |
damping | number | 20 | No | Damping coefficient, which controls the animation when x or y changes and the animation of cross-boundary rebound. A larger value indicates faster movement. |
friction | number | 2 | No | Friction coefficient, which controls the animation of inertial scrolling. A larger value indicates greater friction and a faster scrolling stop. The value must be greater than 0, or the default value is used. |
disabled | boolean | false | No | Disabled or not. |
scale | boolean | false | No | Whether to support pinch-to-zoom. By default, pinch-to-zoom takes effect in movable-view. |
scale-min | number | 0.1 | No | Minimum scale factor. Since: 1.0.3 |
scale-max | number | 10 | No | Maximum scale factor. Since: 1.0.3 |
scale-value | number | 1 | No | Scale factor. The value ranges from 0.5 to 10. |
animation | boolean | true | No | Whether to enable animation. |
bindchange | eventhandle | - | No | Event triggered during dragging, with event.detail = {x, y, source}. |
bindscale | eventhandle | - | No | Event triggered during scaling, with event.detail = {x, y, scale}. |
bindhtouchmove | eventhandle | - | No | Event triggered when the finger moves horizontally after the first touch. If this event is caught, the touchmove event is also caught (not currently supported). |
bindvtouchmove | eventhandle | - | No | Event triggered when the finger moves vertically after the first touch. If this event is caught, the touchmove event is also caught (not currently supported). |
source returned by bindchange indicates the cause of the movement. The following table lists possible values of source.
Value | Description |
|---|---|
touch | Drag. |
touch-out-of-bounds | Out of the movable area. |
out-of-bounds | Rebound after the movement is beyond the movable area. |
friction | Inertia. |
Empty string | Reason set by using the setData method. |
<view class="container">
<view class="page-body">
<view class="page-section">
<view class="page-section-title">Can Exceed Boundaries</view>
<movable-area
style="width: 200px; height: 200px;
background-color: green"
scale-area="{{true}}" >
<movable-view
direction="all"
out-of-bounds
style="width: 50px; height: 50px; background-color: red"
damping >
text
</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">Scalable</view>
<movable-area
scale-area
style="width: 200px; height: 200px; background-color: green" >
<movable-view
direction="all"
bindchange="onChange"
bindscale="onScale"
scale
scale-value="{{scale}}"
style="width: 50px; height: 50px; background-color: red">
text
</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">Vertical Movement Only</view>
<movable-area
style="width: 200px; height: 200px; background-color: green">
<movable-view
direction="vertical"
friction="1"
style="width: 50px; height: 50px; background-color: red" >
text
</movable-view>
</movable-area>
</view>
</view>
</view>