【movable-area、movable-view】 可移动区域组件说明

movable-area、movable-view 可移动区域组件

原型：

<movable-area scale-area="[Boolean]">
    <movable-view
        direction="[all|vertical|horizontal|none]"    
        inertia="[Boolean]"
        out-of-bounds="[Boolean]"
        x="[Number|String]"
        y="[Number|String]"
        damping="[Number]"
        friction="[Number]"
        disabled="[Boolean]"
        scale="[Boolean]"
        scale-min="[Number]"
        scale-max="[Number]"
        scale-value="[Number]"
        animation="[Boolean]"
        bindchange="[EventHandle]"
        bindscale="[EventHandle]"
        htouchmove="[EventHandle]"
        vtouchmove="[EventHandle]"    
    >
    </movable-view>
</movable-area>

 

<movable-area>组件属性说明：

属性	是否必需	类型	默认值	说明
scale-area	否	Boolean	false	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

 

<movable-view>组件属性说明:

属性	是否必需	类型	默认值	说明
direction	否	[all | vertical | horizontal | none]	none	移动方向，默认值为none不能移动
inertia	否	Boolean	false	是否带有惯性移动
out-of-bounds	否	Boolean	false	超过可移动区域后，movable-view是否还可以移动（可移动但会自动回移到movable-area的区域内）
x	否	[String | Number]	0	定义组件位于movable-area内的x轴坐标，比如： 30 或 30px
y	否	[String | Number]	0	定义组件位于movable-area内的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	false	是否使用动画
bindchange	否	EventHandle		拖动过程中触发的事件，自带event参数 event.detail = {x: x, y: y, source: source} event.detail.source表示产生移动的原因 1) 值为touch 表示拖动 2) 值为touch-out-of-bounds 超出移动范围 3) 值为out-of-bounds 超出移动范围后的回弹 4) 值为friction表示惯性 5)值为空字符串 表示通过 js控制了移动
bindscale	否	EventHandle		缩放过程中触发的事件，自带event参数 event.detail = {x: x, y: y, scale: scale}
htouchmove	否	EventHandle		初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove	否	EventHandle		初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch

 

注意事项：

1）movable-view 必须设置width和height属性，不设置默认为10px

2）movable-view 默认为绝对定位，top和left属性为0px

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

4）movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。