t-movable-area

MovableArea 可移动区域

组件介绍

t-movable-area 是可移动区域组件，用于承载 t-movable-view 组件。通过在视图层内部处理拖动，避免逻辑层和视图层之间的通信损耗，实现流畅的拖动体验。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/movable/movable.uvue，配合 t-movable-view 使用。

<template>
  <t-movable-area class="w-100% h-400 bg-#f5f5f5">
    <t-movable-view 
      direction="all" 
      :inertia="true" 
      :x="x" 
      :y="y">
      <view class="w-100 h-100 bg-primary"></view>
    </t-movable-view>
  </t-movable-area>
</template>

<script setup>
const x = ref(0)
const y = ref(0)
</script>

Props

属性名	说明	类型	默认值
scaleArea	是否支持双指缩放区域	boolean	true
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

Slots

插槽名	说明
default	默认插槽，放置 t-movable-view 子组件