【movable-area、movable-view】 可移動區域元件說明
阿新 • • 發佈:2018-11-01
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/>元件中,並且必須是直接子節點,否則不能移動。