Nhảy tới nội dung

movable-view

movable-view là container component cho phép kéo và thả chính nó và các thành phần con trong nó trên page. movable-view bắt buộc phải nằm trong movable-area. Nếu không, movable-view không thể di chuyển được.

Quét mã để trải nghiệm​

Xem code mẫu trên Tini Studio

Demo​

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính​

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
directionstringnoneCác hướng mà thành phần có thể di chuyển được. Giá trị của direction bao gồm "all", "vertical", "horizontal" và "none".
inertiabooleanfalseKhi thuộc tính này xác định, movable-view sẽ có quán tính sau khi thả ra.
out-of-boundsbooleanfalseKhi thuốc tính này xác định, movable-view có thể di chuyển ra ngoài movable-area.
xnumberundefinedVị trí mặc định theo x-axis của view. Khi giá tị x nằm ngoài movable area vị trí biên sẽ được sử dụng.
ynumberundefinedVị trí mặc định theo y-axis của view. Khi giá tị y nằm ngoài movable area vị trí biên sẽ được sử dụng
dampingnumber20Khi thuộc tính out-of-bounds được bật, sau khi di chuyển ra ngoài movable area view sẽ có hiệu ứng bật ngược lại.
frictionnumber2Khi inertia được bật, thuộc tính này dùng để quy định gia tốc của view tiếp tục di chuyển sau khi thả ra.
disabledbooleanfalseTắt không cho view di chuyển.
scalebooleanfalseXác định cho phép view scale bằng 2 ngón tay được không.
scale-minnumber0.5Giá trị tối thiểu được scale.
scale-maxnumber0.5Giá trị cực đại được scale.
scale-valuenumber1Giá trị scale ban đầu.
animationbooleanfalseCho phép tắt mở animation khi di chuyển.
onChangeEventHandleundefinedSự kiện được kích hoạt khi view được di chuyển. event.detail = { x, y source }
onScaleEventHandleundefinedSự kiện được kích hoạt khi view được scale. event.detail = { x, y, scale }

Giá trị của Source trong sự kiện onChange và onScale​

Sự kiện onChange và onScale có thể được kích hoạt do người dùng di chuyển hoặc cũng do hiểu ứng liên quan. Để phần biệt sự kiện là do người dùng hay hệ thống bạn dựa vào thuộc tính source trong detail với các giá trị sau:

Thuộc tínhMô tả
touchKhi view đang được di chuyển
touch-out-of-boundsKhi view di chuyển ra ngoài movable area
out-of-boundsKhi view di chuyển vào lại movable area
frictionKhi view di chuyển do quán tính
Empty stringView di chuyển do setData

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>