微信小程序拖动组件移动视图使用教程

前言

前一天晚上在520天的小程序,让程序员又激动,更新了一些有吸引力的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调整的API,也增强了地图组件的功能。

此次更新,UI组件还补充说,这是视图组件的活动来看,这需要使用movable-area.in概括地说,它是一个支持拖动的内容在一个特定区域的能力的容器。

让我们看一个简单的例子:








接口



我们利用活动区设置一种大小的阻力区(红色),然后在这个区域放置尺寸50x50可以拖动移动视图(蓝色),这可以拖动的方向的内容设置,可以说在任何方向上的阻力。


拖动演示



在可移动区域标记中,不仅可以放置可移动视图,还支持多个可移动视图的放置,并查看下面的示例:















接口2

拖动演示2



移动视图的方向属性支持以下四个值:

所有-拖动在任何方向
垂直纵向阻力
水平侧向阻力
没有-没有拖




前3个值是很清楚的,如果方向设置为最后一个,你只能依靠设置x,y属性值来定位在可移动区域:








当代码运行,蓝色的活动视图显示在(50,50)。




总结

一般来说,小程序中拖动组件的功能通常是简单介绍的。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问,您可以留言交流,谢谢您的支持。