movable-view 可移动视图容器
收藏
我的收藏

基础库 2.25.0 开始支持本组件,低版本需做兼容处理。​
可移动的视图容器,在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。​

属性说明​

属性名​
类型​
默认值​
必填​
说明​
最低支持版本​
direction​
string​
none​
否​
movable-view 的移动方向,属性值有 all、vertical、horizontal、none。​
2.25.0​
inertia​
boolean​
false​
否​
movable-view 是否带有惯性。​
2.25.0​
out-of-bounds​
boolean​
false​
否​
超过可移动区域后,movable-view 是否还可以移动。​
2.25.0​
x​
number | string​
无​
否​
定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围;改变 x 的值会触发动画。​
2.25.0​
y​
number | string​
无​
否​
定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画。​
2.25.0​
damping​
number​
20​
否​
阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画,值越大移动越快。​
2.25.0​
friction​
number​
2​
否​
摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于 0,否则会被设置成默认值。​
2.25.0​
disabled​
boolean​
false​
否​
是否禁用。​
2.25.0​
scale​
boolean​
false​
否​
是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内。​
2.25.0​
scale-min​
number​
0.5​
否​
定义缩放倍数最小值。​
2.25.0​
scale-max​
number​
10​
否​
定义缩放倍数最大值。​
2.25.0​
scale-value​
number​
1​
否​
定义缩放倍数,取值范围为 0.5 ~ 10。​
2.25.0​
animation​
boolean​
true​
否​
是否使用动画。​
2.25.0​
bindchange​
EventHandle​
无​
否​
拖动过程中触发的事件。​
2.25.0​
bindscale​
EventHandle​
无​
否​
缩放过程中触发的事件。​
2.25.0​
bindhtouchmove​
EventHandle​
无​
否​
初次手指触摸后移动为横向的移动时触发。​
2.25.0​
bindvtouchmove​
EventHandle​
无​
否​
初次手指触摸后移动为纵向的移动时触发。​
2.25.0​

bindchange 事件对象的 detail​

object 类型,属性如下:​
属性名​
类型​
说明​
最低支持版本​
x​
number​
x 轴方向的偏移​
2.25.0​
y​
number​
y 轴方向的偏移​
2.25.0​
source​
string​
产生移动的原因​
2.25.0​

source 的合法值​

值​
说明​
最低支持版本​
touch​
拖动​
2.25.0​
touch-out-of-bounds​
超出移动范围​
2.25.0​
out-of-bounds​
超出移动范围后的回弹​
2.25.0​
friction​
惯性​
2.25.0​
空字符串​
setData​
2.25.0​

bindscale 事件对象的 detail​

object 类型,属性如下:​
属性名​
类型​
说明​
最低支持版本​
x​
number​
x 轴方向的偏移​
2.25.0​
y​
number​
y 轴方向的偏移​
2.25.0​
scale​
number​
缩放倍数​
2.25.0​

扫码体验​

代码示例​

Bug & Tip​

    Tip:movable-view 必须设置 width 和 height 属性,不设置默认为 10px;​
    Tip:movable-view 默认为绝对定位,top 和 left 属性为 0px。​