movable-area
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ính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
scale-area | boolean | false | Khi 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>