---
name: "movable-view"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "movable-view - 可移动的视图容器，在页面中可以拖拽滑动"
---

## movable-view

> [VERSION] 基础库 >= 2.10.0

### 描述

可移动视图容器，在 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` | 否 | `0` | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围 |
| `y` | `number` | 否 | `0` | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围 |
| `damping` | `number` | 否 | `20` | 阻尼系数，用于控制 x 或 y 改变时的动画 |
| `friction` | `number` | 否 | `2` | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `scale` | `boolean` | 否 | `false` | 是否支持双指缩放 |
| `scale-min` | `number` | 否 | `0.5` | 定义缩放倍数最小值 |
| `scale-max` | `number` | 否 | `10` | 定义缩放倍数最大值 |
| `scale-value` | `number` | 否 | `1` | 定义缩放倍数，取值范围为 0.5 - 10 |
| `animation` | `boolean` | 否 | `true` | 是否使用动画 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `change` | `(event: MovableViewChangeEvent) => void` | 拖动过程中触发 |
| `scale` | `(event: MovableViewScaleEvent) => void` | 缩放过程中触发 |

**MovableViewChangeEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"change"` | 事件类型 |
| `detail` | `MovableViewChangeDetail` | 事件数据 |

**MovableViewScaleEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"scale"` | 事件类型 |
| `detail` | `MovableViewScaleDetail` | 事件数据 |

### 示例代码

#### 基础拖动与方向限制

*index.tyml*

```xml
<view class="section">
  <text class="title">自由拖动</text>
  <movable-area class="area">
    <movable-view direction="all" x="{{0}}" y="{{0}}" class="box">全向</movable-view>
  </movable-area>
</view>
<view class="section">
  <text class="title">仅水平拖动</text>
  <movable-area class="area">
    <movable-view direction="horizontal" x="{{0}}" y="{{0}}" class="box box-green">水平</movable-view>
  </movable-area>
</view>
```

*index.tyss*

```css
.section { margin-bottom: 20px; }
.title { font-size: 14px; color: #666; margin-bottom: 8px; }
.area { width: 300px; height: 200px; background-color: #f5f5f5; }
.box {
  width: 80px;
  height: 80px;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.box-green { background-color: #52c41a; }
```

*index.js*

```javascript
Page({});
```

#### 惯性回弹与缩放

*index.tyml*

```xml
<view class="section">
  <text class="title">惯性 + 回弹</text>
  <movable-area class="area">
    <movable-view
      direction="all"
      inertia
      out-of-bounds
      damping="{{30}}"
      friction="{{5}}"
      x="{{50}}"
      y="{{50}}"
      animation
      bind:change="onChange"
      class="box box-orange"
    >惯性</movable-view>
  </movable-area>
</view>
<view class="section">
  <text class="title">双指缩放</text>
  <movable-area scale-area class="area">
    <movable-view
      direction="all"
      scale
      scale-min="{{0.5}}"
      scale-max="{{3}}"
      scale-value="{{1}}"
      bind:scale="onScale"
      class="box box-purple"
    >缩放</movable-view>
  </movable-area>
</view>
```

*index.tyss*

```css
.section { margin-bottom: 20px; }
.title { font-size: 14px; color: #666; margin-bottom: 8px; }
.area { width: 300px; height: 200px; background-color: #f5f5f5; }
.box {
  width: 80px;
  height: 80px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.box-orange { background-color: #fa8c16; }
.box-purple { background-color: #722ed1; }
```

*index.js*

```javascript
Page({
  onChange(e) {
    console.log('位置:', e.detail.x, e.detail.y, '原因:', e.detail.source);
  },
  onScale(e) {
    console.log('缩放:', e.detail.scale);
  },
});
```


### 注意事项

1. `movable-view` 必须设置 `width` 和 `height` 属性，不设置默认为 `10px`
2. `movable-view` 默认为绝对定位，`top` 和 `left` 属性为 `0px`