movable-view
更新时间：2025-04-10 15:29:45
movable-view
可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| direction | string | none | movable-view的移动方向，属性值有all、vertical、horizontal、none | |
| inertia | boolean | false | movable-view是否带有惯性 | |
| out-of-bounds | boolean | false | 超过可移动区域后，movable-view是否还可以移动 | |
| x | number,string | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画；单位支持px（默认） | ||
| y | number,string | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画；单位支持px（默认） | ||
| damping | number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | |
| friction | number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | |
| disabled | boolean | false | 是否禁用 | |
| scale | boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | |
| scale-min | number | 0.5 | 定义缩放倍数最小值 | |
| scale-max | number | 10 | 定义缩放倍数最大值 | |
| scale-value | number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 | |
| animation | boolean | true | 是否使用动画 | |
| bindchange | eventhandle | 拖动过程中触发的事件，event.detail = {x, y, source}, 其中 source 表示产生移动的原因，值可为 touch（拖动） | ||
| bindscale | eventhandle | 缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持 | ||
| htouchmove | eventhandle | 初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch | ||
| vtouchmove | eventhandle | 初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |
扫码预览
组件示例
html
<div class="container">
<div class="page-section">
<div class="page-section-title">movable-view 区域小于 movable-area</div>
<div class="movable-area">
<div class="movable-view" style="transform: translate({{x}}px, {{y}}px);" direction="all">text</div>
</div>
</div>
<div class="btn-area">
<button onclick="moveTo(30, 30)">点击移动到 (30px, 30px)</button>
</div>
<div class="page-section">
<div class="page-section-title">movable-view 区域大于 movable-area</div>
<div class="movable-area">
<div class="movable-view max" direction="all">text</div>
</div>
</div>
<div class="page-section">
<div class="page-section-title">只可以横向移动</div>
<div class="movable-area">
<div class="movable-view" direction="horizontal">text</div>
</div>
</div>
<div class="page-section">
<div class="page-section-title">只可以纵向移动</div>
<div class="movable-area">
<div class="movable-view" direction="vertical">text</div>
</div>
</div>
<div class="page-section">
<div class="page-section-title">可超出边界</div>
<div class="movable-area">
<div class="movable-view" direction="all" out-of-bounds>text</div>
</div>
</div>
<div class="page-section">
<div class="page-section-title">带有惯性</div>
<div class="movable-area">
<div class="movable-view" direction="all" inertia>text</div>
</div>
</div>
<div class="page-section">
<div class="page-section-title">可放缩</div>
<div class="movable-area" scale-area>
<div class="movable-view" direction="all" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}"
onscale="onScale" onchange="onChange">text</div>
</div>
</div>
<div class="btn-area">
<button onclick="enlargeThreeTimes()">点击放大3倍</button>
</div>
</div>
该文档是否对您有帮助？