movable-view

基础库 1.2.0 开始支持,低版本需做兼容处理

可移动的视图容器,在页面中可以拖拽滑动。<movable-view>必须在 <movable-area> 组件中,并且必须是直接子节点,否则不能移动。

属性 类型 默认值 必填 说明 最低版本
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 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 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} 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

bindchange 返回的 source 表示产生移动的原因

说明
touch 拖动
touch-out-of-bounds 超出移动范围
out-of-bounds 超出移动范围后的回弹
friction 惯性
空字符串 setData

Bug & Tip

  1. tip: movable-view 必须设置width和height属性,不设置默认为10px
  2. tip: movable-view 默认为绝对定位,top和left属性为0px

个结果 ""

    没有找到相关内容 ""