图文并茂演示小程序movable-view的可移动范围

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

前言

开发过小程序的同学可能对这两个内置组件并不陌生，他们配合用来实现在页面中可以拖拽滑动，其中：

• movable-area表示元素可移动的区域，它决定元素移动的区域范围
• movable-view表示可移动的视图容器，它决定了什么元素可以移动

使用上要求movable-view必须是movable-area的直接子节点，否则不能移动。

这两个组件对于比较常规的可拖拽移动产品需求可以轻松应对，但是针对一些稍微复杂的需求，可能需要对他们的用法原理要进一步掌握理解。

重新认识movable-area和movable-view

在微信小程序官网介绍movable-area时，有过这样的一段提示：

1. tip: 当 movable-view 小于 movable-area 时，movable-view的移动范围是在 movable-area 内；
2. tip: 当 movable-view 大于 movable-area 时，movable-view的移动范围必须包含movable-area（x轴方向和 y 轴方向分开考虑）

上面两个组件比较大小是基于各自的尺寸大小而言的，也就是对应矩形的区域面积而言。

其实官网上面对二者关系的说明不是太详细，有很多情况需要区分开；本人在项目做了不同的尝试，下面是总结的不同情况，有不对的地方还请大家斧正。

movable-area和movable-view的一方完全包含另一方

针对movable-area和movable-view其中一方的尺寸大小可以完全覆盖另一方的尺寸大小时，其移动范围表现比较好理解。

例如下图为