# movable-view
基礎(chǔ)庫(kù) 1.2.0 開(kāi)始支持,低版本需做兼容處理。
微信 Windows 版:支持
微信 Mac 版:支持
微信 鴻蒙 OS 版:支持
渲染框架支持情況:WebView
# 功能描述
可移動(dòng)的視圖容器,在頁(yè)面中可以拖拽滑動(dòng)。movable-view必須在 movable-area 組件中,并且必須是直接子節(jié)點(diǎn),否則不能移動(dòng)。
# 屬性說(shuō)明
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 |
|---|---|---|---|---|---|
| direction | string | none | 否 | movable-view的移動(dòng)方向,屬性值有all、vertical、horizontal、none | 1.2.0 |
| inertia | boolean | false | 否 | movable-view是否帶有慣性 | 1.2.0 |
| out-of-bounds | boolean | false | 否 | 超過(guò)可移動(dòng)區(qū)域后,movable-view是否還可以移動(dòng) | 1.2.0 |
| x | number/string | 否 | 定義x軸方向的偏移,如果x的值不在可移動(dòng)范圍內(nèi),會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍;改變x的值會(huì)觸發(fā)動(dòng)畫(huà);單位支持px(默認(rèn))、rpx; | 1.2.0 | |
| y | number/string | 否 | 定義y軸方向的偏移,如果y的值不在可移動(dòng)范圍內(nèi),會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍;改變y的值會(huì)觸發(fā)動(dòng)畫(huà);單位支持px(默認(rèn))、rpx; | 1.2.0 | |
| damping | number | 20 | 否 | 阻尼系數(shù),用于控制x或y改變時(shí)的動(dòng)畫(huà)和過(guò)界回彈的動(dòng)畫(huà),值越大移動(dòng)越快 | 1.2.0 |
| friction | number | 2 | 否 | 摩擦系數(shù),用于控制慣性滑動(dòng)的動(dòng)畫(huà),值越大摩擦力越大,滑動(dòng)越快停止;必須大于0,否則會(huì)被設(shè)置成默認(rèn)值 | 1.2.0 |
| disabled | boolean | false | 否 | 是否禁用 | 1.9.90 |
| scale | boolean | false | 否 | 是否支持雙指縮放,默認(rèn)縮放手勢(shì)生效區(qū)域是在movable-view內(nèi) | 1.9.90 |
| scale-min | number | 0.1 | 否 | 定義縮放倍數(shù)最小值 | 1.9.90 |
| scale-max | number | 10 | 否 | 定義縮放倍數(shù)最大值 | 1.9.90 |
| scale-value | number | 1 | 否 | 定義縮放倍數(shù),取值范圍為 0.1 - 10 | 1.9.90 |
| animation | boolean | true | 否 | 是否使用動(dòng)畫(huà) | 2.1.0 |
| bindchange | eventhandle | 否 | 拖動(dòng)過(guò)程中觸發(fā)的事件,event.detail = {x, y, source} | 1.9.90 | |
| bindscale | eventhandle | 否 | 縮放過(guò)程中觸發(fā)的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持 | 1.9.90 | |
| htouchmove | eventhandle | 否 | 初次手指觸摸后移動(dòng)為橫向的移動(dòng)時(shí)觸發(fā),如果catch此事件,則意味著touchmove事件也被catch | 1.9.90 | |
| vtouchmove | eventhandle | 否 | 初次手指觸摸后移動(dòng)為縱向的移動(dòng)時(shí)觸發(fā),如果catch此事件,則意味著touchmove事件也被catch | 1.9.90 |
# bindchange 返回的 source 表示產(chǎn)生移動(dòng)的原因
| 值 | 說(shuō)明 |
|---|---|
| touch | 拖動(dòng) |
| touch-out-of-bounds | 超出移動(dòng)范圍 |
| out-of-bounds | 超出移動(dòng)范圍后的回彈 |
| friction | 慣性 |
| 空字符串 | setData |
# Bug & Tip
tip: movable-view 必須設(shè)置width和height屬性,不設(shè)置默認(rèn)為10pxtip: movable-view 默認(rèn)為絕對(duì)定位,top和left屬性為0pxtip: 若當(dāng)前組件所在的頁(yè)面或全局開(kāi)啟了enablePassiveEvent配置項(xiàng),該內(nèi)置組件可能會(huì)出現(xiàn)非預(yù)期表現(xiàn)(詳情參考 enablePassiveEvent 文檔)