【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/>組件中，並且必須是直接子節點，否則不能移動。