movable-view

2021-07-21 11:23

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.