May 18, 2021 WeChat Mini Program Development Document
Base library 1.2.0 starts to support, and low versions need to be compatible
movable-view
removable area
Note: movable-area must set the width and height properties, not the default 10px
Base library 1.2.0 starts to support, and low versions need to be compatible
A removable view container that you can drag and swipe on a page
| The property name | Type | The default | Description |
|---|---|---|---|
| direction | String | none | The direction in which movable-view moves, with property values of all, vertical, horizontal, none |
| inertia | Boolean | false | Whether movable-view has inertia |
| out-of-bounds | Boolean | false | Whether movable-view can still be moved after the removable area has been exceeded |
| Ⅹ | Number | Defines an offset in the direction of the x-axis, which automatically moves to a mmoable range if the value of x is not within the removable range; | |
| Y | Number | Defines an offset in the direction of the y-axis, which automatically moves to the medable range if the value of y is not within the removable range; | |
| damping | Number | 20 | Damping factor, used to control animations and over-bound bounces when x or y changes, the higher the value, the faster the movement |
| friction | Number | 2 | Friction coefficient, used to control the animation of inertial sliding, the greater the value of friction, the faster the sliding stop; |
movable-view must set the width and height properties, not the default 10px
movable-view defaults to absolute positioning, with top and loft properties of 0px
When movable-view is smaller than movable-area, the range of movement of movable-view is within movable-area, and when movable-view is larger than movable-area, the range of movement of movable-view must include movable-area (the x-axis and y-axis directions are considered separately)
Note:
movable-view must be
<movable-area/>
and must be a direct child node, otherwise it cannot be moved.
Example code:
<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>
<view class="section__title">movable-view区域大于movable-area</view>
<movable-area style="height: 100px;width: 100px;background: red;" direction="all">
<movable-view style="height: 200px; width: 200px; background: blue;">
</movable-view>
</movable-area>
</view>
Page({
data: {
x: 0,
y: 0
},
tap: function(e) {
this.setData({
x: 30,
y: 30
});
}
})