🚀前言

在现代应用开发中，用户交互的灵活性和直观性越来越受到重视。微信小程序的可拖曳容器组件正是为了满足这一需求而设计的，它允许用户通过简单的拖动操作，自由调整内容的位置和布局。这种交互方式不仅提升了用户体验，还为开发者提供了更多的创意空间，帮助他们创建更加动态和个性化的应用。

本篇文章将深入探讨微信小程序中的可拖曳容器组件，详细介绍其基本概念、常用属性以及如何在实际项目中实现这个功能。我们将结合实例，展示如何通过可拖曳容器组件提升小程序的交互性和用户友好度。

无论你是刚刚踏入小程序开发领域的新手，还是希望丰富应用功能的经验开发者，这篇文章都将为你提供实用的知识和技巧。让我们一起探索可拖曳容器组件的应用潜力，创造出更加生动和引人入胜的小程序吧！

🚀一、可拖曳容器组件

当页面内某些组件的位置支持用户拖曳设置时，就可以使用可拖曳的容器组件movable-area。movable-area组件可以理解为一块支持内部组件拖曳移动的区域。其内的子组件必须是movable-view才能支持拖曳操作。

🔎1.可拖曳容器组件示例

🦋1.1 步骤 1: 创建页面文件

首先，在示例项目的 pages 文件夹下新建一个名为 movableDemo 的页面。

🦋1.2 步骤 2: 编写 movableDemo.wxml 文件

在 movableDemo.wxml 文件中，编写如下代码：

<!-- pages/movableDemo/movableDemo.wxml -->
<movable-area class="movable">
  <movable-view class="block" direction="all">色块 1</movable-view>
  <movable-view y="60" class="block" direction="horizontal">色块 2</movable-view>
  <movable-view y="120" class="block" direction="vertical">色块 3</movable-view>
</movable-area>

在上述代码中，在页面中创建了 movable-area 容器，容器内放置了 3 个子组件，都是 movable-view 组件。对于这 3 个子组件，分别设置为可任意方向拖曳移动、可水平方向拖曳移动和可竖直方向拖曳移动。

🦋1.3 步骤 3: 编写 movableDemo.wxss 文件

在 movableDemo.wxss 文件中简单实现一下样式，代码如下：

/* pages/movableDemo/movableDemo.wxss */
.movable {
  width: 100%;
  height: 300px;
  background-color: gray;
}

.block {
  background-color: red;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: wheat;
}

在上述样式中，我们设置了 movable 容器的宽度和高度，并为 block 子组件设置了背景颜色、尺寸、文本居中等样式。

🦋1.4 编译代码

编译代码后，效果如图所示。我们可以尝试对页面中 3 个色块进行拖曳移动，移动后可发现：

• 第一个色块可以任意方向拖曳移动。
• 第二个色块只能在水平方向拖曳移动。
• 第三个色块只能在竖直方向拖曳移动。

这样，我们就完成了一个简单的可拖曳色块的页面实现。

🔎2.movable-area组件与 movable-view 组件

🦋2.1 movable-area

movable-area 使用虽然非常简单，但是有一点需要注意，movable-area 必须设置 width 和 height 属性，如果不设置，默认的宽高为 10px。当 movable-view 组件的尺寸小于 movable-area 时，movable-view 只能在 movable-area 区域内进行移动。当 movable-view 组件尺寸大于 movable-area 时，其宽高设为 scroll-view 非常类似了，可以进行移动和缩放并展示完整的视图。同时，它也必须放置在 movable-area 组件内部，否则不能支持拖拽与缩放。movable-view 是最复杂支持拖拽与滑动的视图组件，属性如表 3-7 所示。

🦋2.2 movable-view

🦋2.3 事件处理：bindchange

对于 bindchange 事件，有时需要知道触发它的来源。在其回调的参数中有 source 字段，这个字段表示了触发 bindchange 事件的原因。

source 字段的值与含义：

• 当 source 值为 touch 时，表示 bindchange 事件是由用户拖曳触发的。
• 当 source 值为 touch-out-of-bounds 时，表示 bindchange 事件是超出移动区域范围触发的。
• 当 source 值为 out-of-bounds 时，表示 bindchange 事件是由超出移动区域范围后回弹效果触发的。
• 当 source 值为 inertia 时，表示 bindchange 事件是由惯性效果触发的。
• 当 source 值为空字符串时，表示 bindchange 事件是代码设置组件 x 或 y 属性移动触发的。

movable-view 组件布局与尺寸控制

• movable-view 组件默认采用的是绝对定位的布局方式，通常我们不会通过样式表对其位置进行设置，而是通过组件的 x 和 y 属性进行设置。
• movable-view 组件必须设置样式表中的 width 和 height 属性来控制组件的尺寸大小。