movable-view
movable-view can be dragged and slid in the page. The movable-view component must be in the movable-area component and must be a direct child node. Otherwise, the component can't move.
Notes:
- movable-view must set the width and height properties. Otherwise, the default value 10px is used.
- By default, movable-view uses absolute positioning, which can't be changed. The values of the top and left properties are 0 px.
- When movable-view is smaller than movable-area, the moving range of movable-view is within the movable-area. When movable-view is larger than movable-area, the moving range of movable-view must cover the movable-area. The x-axis direction and the y-axis direction are separately considered.
Sample Code
index.axml
copy
<!-- API-DEMO page/component/movable-view.axml -->
<view class="page">
<view class="page-description">movable-view</view>
<view class="page-section">
<view class="page-section-title">movable-view is less than movable-area</view>
<view class="page-section-demo">
<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all">movable-view</movable-view>
</movable-area>
</view>
<button style="margin-left: 10px; margin-right: 10px;" type="primary" onTap="onButtonTap">Click Me to Move to (30px, 30px)</button>
</view>
<view class="page-section">
<view class="page-section-title">movable-view is greater than movable-area</view>
<view class="page-section-demo">
<movable-area>
<movable-view class="max" direction="all">movable-view</movable-view>
</movable-area>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Can only be moved laterally</view>
<view class="page-section-demo">
<movable-area>
<movable-view direction="horizontal">
movable-view
</movable-view>
</movable-area>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Can only be moved vertically</view>
<view class="page-section-demo">
<movable-area>
<movable-view direction="vertical">
movable-view
</movable-view>
</movable-area>
</view>
</view>
</view>
index.js
copy
// API-DEMO page/component/movable-view.js
Page({
data: {
x: 0,
y: 0,
},
onButtonTap() {
const { x, y } = this.data;
if (x === 30) {
this.setData({
x: x + 1,
y: y + 1,
});
} else {
this.setData({
x: 30,
y: 30
});
}
},
});
index.json
copy
// API-DEMO page/component/movable-view.json
{
"allowsBounceVertical": "NO"
}
index.acss
copy
/* API-DEMO page/component/movable-view.acss */
movable-area {
height: 400rpx;
width: 400rpx;
margin: 50rpx 0rpx 0 50rpx;
background-color: #ccc;
overflow: hidden;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 200rpx;
width: 200rpx;
background: #108ee9;
color: #fff;
}
.max {
width: 600rpx;
height: 600rpx;
}
Parameters
Property | Type | Default | Description |
direction | String | none | The moving direction of movable-view. Valid values are "all", "vertical", "horizontal", and "none". |
inertia | Boolean | false | This field specifies whether movable-view has inertia. |
out-of-bounds | Boolean | false | This field specifies whether movable-view can move after the view container is out of the movable area. |
x | Number | 0 | This field defines the offset in the direction of the x axis, which is converted to the left property of the component. If the value of x is not within the movable range, the component is automatically moved to the movable range. |
y | Number | 0 | This field defines  the offset in the direction of the Y-axis, which is direction is converted to the top property. If the value of Y is not within the movable range, it will be automatically moved to the movable range. |
damping | Number | 20 | 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. A higher value leads to faster movement. |
friction | Number | 2 | The friction coefficient, which is used to control the animation that moves due to inertia. A higher value leads to higher friction and indicates that the movement stops earlier. Must be greater than 0. Otherwise the default value is used. |
disabled | Boolean | false | This field specifies whether to disable the component. |
scale | Boolean | false | This field specifies whether to support two-finger scaling. The effective area for scaling gestures falls within the movable-view by default. |
scale-min | Number | 0.5 | The minimum value of the scaling level. |
scale-max | Number | 10 | The maximum value of the scaling level. |
scale-value | Number | 1 | The scale level. Can range from 0.5 to 10. |
animation | Boolean | false | This field specifies whether to use animations. |
onTouchStart | EventHandle | - | Finger touch starts and this event is passed to the parent node. |
catchTouchStart | EventHandle | - | Finger touch starts and this event only acts on the component and is not passed to the parent node. |
onTouchMove | EventHandle | - | Finger moves after touch, the event is passed to the parent node. |
catchTouchMove | EventHandle | - | Finger moves after touch, the event only acts on the component and is not passed to the parent node. |
onTouchEnd | EventHandle | - | The touch action ends, the event is passed to the parent node. |
catchTouchEnd | EventHandle | - | The touch action ends, the event only acts on the component and is not passed to the parent node. |
onTouchCancel | EventHandle | - | The touch action is interrupted, such as call reminding and popups. |
onChange | EventHandle | - | The event triggered during dragging, event. detail = {x: x, y: y, source: touch} , where source shows the reason of the movement, for example, the value is touch . |
onChangeEnd | EventHandle | - | The event triggered after dragging, event.detail = {x: x, y: y} . |
onScale | EventHandle | - | The event triggered during zooming,event.detail = {x, y, scale }. |
onChange return value detail.source
The source field shows the reason of the movement.
Value | Description |
touch | Dragging. |
touch-out-of-bounds | The movable range is exceeded. |
out-of-bounds | Pullback after the movable range is exceeded. |
friction | Inertia. |
Empty string | setData . |
Instruction:Please check the event type in the event introduction for bubbling event.