1. 程式人生 > >【movable-area、movable-view】 可移動區域元件說明

【movable-area、movable-view】 可移動區域元件說明

movable-area、movable-view 可移動區域,其原型如下:

 1 <movable-area scale-area="[Boolean]">
 2     <movable-view
 3         direction="[all|vertical|horizontal|none]"    
 4         inertia="[Boolean]"
 5         out-of-bounds="[Boolean]"
 6         x="[Number|String]"
 7         y="[Number|String]"
8 damping="[Number]" 9 friction="[Number]" 10 disabled="[Boolean]" 11 scale="[Boolean]" 12 scale-min="[Number]" 13 scale-max="[Number]" 14 scale-value="[Number]" 15 animation="[Boolean]" 16 bindchange="[EventHandle]" 17 bindscale
="[EventHandle]" 18 htouchmove="[EventHandle]" 19 vtouchmove="[EventHandle]" 20 > 21 </movable-view> 22 </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/>元件中,並且必須是直接子節點,否則不能移動。