7.1 视图容器组件
7.1.4 movable-view和movable-area组件
movable-view是一个可移动的视图容器,它需要与movable-area组件结合使用。movabke-view只能放在movable-area组件中,在movable-area组件的范围内拖曳滑动。
movable-view组件属性如下:
属性 | 类型 | 默认值 | 说明 | 最低版本 |
direction | string | none | movable-view的移动方向,可选值为all、vertical、horizontal、none | 1.2.0 |
inertia | boolean | false | movable-view是否带有惯性 | 1.2.0 |
out-of-bounds | boolean | false | 超过可移动区域后,movable-view是否还可以移动 | 1.2.0 |
x | number | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围内;改变x的值会触发动画 | 1.2.0 | |
y | number | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围内;改变y的值会触发动画 | 1.2.0 | |
damping | number | 20 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画 | 1.2.0 |
friction | number | 2 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止 ;必须大于0,否则会被设置成默认值 | 1.2.0 |
disabled | boolean | false | 是否禁用 | 1.9.90 |
scale | boolean | false | 是否支持双指缩放 | 1.9.90 |
scale-min | number | 0.5 | 定义缩放倍数最小值 | 1.9.90 |
scale-max | number | 10 | 定义缩放倍数最大值 | 1.9.90 |
scale-value | number | 1 | 定义缩放倍数,取值范围为 0.5 - 10 | 1.9.90 |
animation | boolean | true | 是否使用动画 | 2.1.0 |
bindchange | eventhandle | 拖动过程中触发的事件,event.detail = {x, y, source}, source表示产生移动的原因,可能值如下: touch:拖动 touch-out-og-bound:超出移动范围 out-of-bounds:超出移动范围后的回弹 friction:惯性 空字符串:setData设置了位置 | 1.9.90 | |
bindscale | eventhandle | 缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持 | 1.9.90 | |
htouchmove | eventhandle | 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch | 1.9.90 | |
vtouchmove | eventhandle | 初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch | 1.9.90 |