t-movable-view

MovableView 可移动视图

组件介绍

t-movable-view 是可移动的视图容器，必须在 t-movable-area 组件内使用。支持拖动、惯性、边界控制和缩放等功能，通过在视图层内部处理拖动，避免逻辑层和视图层之间的通信损耗。

平台兼容

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

基础用法

基础用法参考 demo/movable/movable.uvue，在 t-movable-area 内使用。

<template>
  <t-movable-area class="w-100% h-400 bg-#f5f5f5">
    <!-- 全方向拖动 -->
    <t-movable-view 
      direction="all" 
      :inertia="true" 
      :outOfBounds="false"
      :x="x" 
      :y="y"
      @change="onChange">
      <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)

function onChange(e: any) {
  console.log('位置变化：', e.detail.x, e.detail.y)
}
</script>

Props

属性名	说明	类型	默认值
direction	移动方向，可选 all、vertical、horizontal、none	string	'all'
inertia	是否带有惯性	boolean	false
outOfBounds	是否可以超出边界	boolean	false
x	X 坐标	number	0
y	Y 坐标	number	0
damping	阻尼系数	number	20
friction	摩擦系数	number	2
disabled	是否禁用	boolean	false
scale	是否支持缩放	boolean	false
scaleMin	最小缩放比例	number	0.5
scaleMax	最大缩放比例	number	10
scaleValue	缩放比例	number	1
animation	是否使用动画	boolean	true
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
effect	组件显示主题	string	''
size	组件尺寸	string	''

direction 可选值

值	说明
all	全方向移动
vertical	仅垂直方向移动
horizontal	仅水平方向移动
none	不可移动

Events

事件名	说明	回调参数
change	拖动过程中触发	{ x, y, source }
scale	缩放过程中触发	{ x, y, scale }

change 事件 source 值

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
''	setData

Slots

插槽名	说明
default	默认插槽，放置可移动的内容