AVM 拖动组件 movable-view 介绍

应用开发中拖动功能是比较常见的 ，如滑动解锁，滑动验证码，实现一些小游戏，少儿编程中常见。

avm.js 是多端开发框架，一套代码可同时编译为APP 、小程序、h5。

avm 框架中实现拖动功能非常简单，先使用 movable-view 标签定义一个可移动区域，并指定宽高，代码如下：

再使用 movable-view 标签定义一个可移动区域，指定宽高，代码如下：

此时，我们运行代码，发现滑块还是不可拖动的。我们需要在 movable-view 上添加一个属性 direction；

direction="horizontal"

direction 属性指定滑块的移动方向，取值范围： all、vertical、horizontal、none；默认值none；

下面看一个简单的滑动验证的示例：

效果图：

实现代码：

通过 onchange 事件可获取滑块滑动时返回的位置信息，通过判断滑块的x坐标到达目标区间内，则提示验证成功。

| onchange | eventhandle |   | 否 | 拖动过程中触发的事件，event.detail = {x, y, source} |

 还有很多属性，可查看官方文档学习：

属性名称	类型	默认值	必填	说明
direction	string	none	否	movable-view 的移动方向，属性值有 all、vertical、horizontal、none
inertia	boolean	false	否	movable-view 是否带有惯性
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view 是否还可以移动
x	number		否	定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围，改变 x 的值会触发动画
y	number		否	定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围，改变 y 的值会触发动画
damping	number	20	否	阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scale-min	number	0.5	否	定义缩放倍数最小值
scale-max	number	10	否	定义缩放倍数最大值
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10
animation	boolean	true	否	是否使用动画
onchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}
onscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}
onhtouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发
onvtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发