movable-area
A movable area of movable-view component. movable-area must set the width and height properties. Otherwise, the default 10px is used.
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 | Required | Description |
scale-area | Boolean | false | No | When the movable-view component is set to support two-finger scaling, this component allows you to modify the effective area for scaling gestures to the entire movable area. |