微信小程序movable-view如何设置具体可移动范围示例详细解析？

本文共计2322个文字，预计阅读时间需要10分钟。

目录前言重新认识movable-area和movable-viewmovable-area完全包含movable-view的另一边movable-area与movable-view区域相交movable-area与movable-view区域大小同时为0movable-view的子元素内容超过其尺寸

目录

• 前言
• 重新认识movable-area和movable-view
• movable-area和movable-view的一方完全包含另一方
• movable-area与movable-view区域交叉
• movable-area与movable-view区域大小同时为0
• movable-view的子元素内容超过其尺寸
• movable-view决定可拖动元素
• 实现一个卡片多段式拖动

前言

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

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

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