前言
开发过小程序的同学可能对这两个内置组件并不陌生,他们配合用来实现在页面中可以拖拽滑动,其中:
- movable-area表示元素可移动的区域,它决定元素移动的区域范围
- movable-view表示可移动的视图容器,它决定了什么元素可以移动
使用上要求movable-view必须是movable-area的直接子节点,否则不能移动。
这两个组件对于比较常规的可拖拽移动产品需求可以轻松应对,但是针对一些稍微复杂的需求,可能需要对他们的用法原理要进一步掌握理解。
重新认识movable-area和movable-view
在微信小程序官网介绍movable-area时,有过这样的一段提示:
tip: 当 movable-view 小于 movable-area 时,movable-view的移动范围是在 movable-area 内;tip: 当 movable-view 大于 movable-area 时,movable-view的移动范围必须包含movable-area(x轴方向和 y 轴方向分开考虑)
上面两个组件比较大小是基于各自的尺寸大小而言的,也就是对应矩形的区域面积而言。
其实官网上面对二者关系的说明不是太详细,有很多情况需要区分开;本人在项目做了不同的尝试,下面是总结的不同情况,有不对的地方还请大家斧正。
movable-area和movable-view的一方完全包含另一方
针对movable-area和movable-view其中一方的尺寸大小可以完全覆盖另一方的尺寸大小时,其移动范围表现比较好理解。
例如下图为movable-view的尺寸完全覆盖movable-area的区域时,movable-view的可以移动范围演示图:
movable-view不管怎么移动都要完全包含住movable-area,也就是说movable-area不能超出movable-view的区域范围;反之亦然。
那么大家有没有想过,若不满足一方能完全包含另一方,