# t-movable-view

MovableView 可移动视图

t-movable-view 组件介绍

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

t-movable-view 平台兼容

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

t-movable-view 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="MovableArea 拖动区域"
				sub-title="补充官方movable-area不支持APP,小程序开发的时候，避免过多的写条件编译"></t-card>
		<t-section title="拖动"
				   class="mb-15"></t-section>
		<t-movable-area :class="[`w-100% h-150 mb-15 tvg r-10`]">
			<t-movable-view :class="[`twh-60 r-10 fc tbg-pn`]"
							:x="x"
							:y="y"
							direction="all"
							:inertia="true"
							:out-of-bounds="true"
							@change="onChange">
				<t-text :fore="true"
						type="primary">Text</t-text>
			</t-movable-view>
		</t-movable-area>
		<t-section title="绽放"
				   class="mb-15"></t-section>
		<t-movable-area :class="[`w-100% h-200 mb-15 tvg r-10`]"
						:scale-area="true">
			<t-movable-view :class="[`twh-60 r-10 fc tbg-pn`]"
							:x="x"
							:y="y"
							:scale-value="scale"
							:scale="true"
							:inertia="true"
							:out-of-bounds="true"
							direction="all"
							@change="onChange">
				<t-text :fore="true"
						type="primary">Text</t-text>
			</t-movable-view>
		</t-movable-area>

		<t-button @click="scale+=0.2"
				  type="primary">缩放</t-button>
	</view>
</template>
<script setup>
	const x = ref(0)
	const y = ref(0)
	const scale = ref(1)

	function onChange(e : UTSJSONObject) {
		// console.log(e)
	}
</script>

t-movable-view 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	不可移动

t-movable-view Events

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

change 事件 source 值

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

t-movable-view Slots

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