Skip to main content

movable-area

Last updated on

movable-area là thành phần quy định phạm di chuyển của các movable-view nằm trong nó.

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
scale-areabooleanfalseKhi các movable-view cho phép scaling. Bạn có thể dùng thuộc tính này để tắt việc scaling của tất cả component ở trong area.

Sample Code

index.txml
<view>
<block-header title="Usage" description="A movable view container. It can be dragged to move on a page. " />
<view class="block-content">
<view onTap="onTap">movable-view is smaller than movable-area</view>
<movable-area>
<movable-view direction="all">text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>movable-view is larger than movable-area</text>
<movable-area>
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>movable-view can move horizontally</text>
<movable-area>
<movable-view direction="horizontal">text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>movable-view can move vertically</text>
<movable-area>
<movable-view direction="vertical">text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>movable-view can move after the view container is out of the movable area</text>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>movable-view has inertia</text>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
</view>

<view class="block-content">
<text>two-finger scaling</text>
<movable-area scale-area>
<movable-view direction="all" scale scale-min="0.5" scale-max="4">text</movable-view>
</movable-area>
</view>
</view>