以下将展示微信小程序之视图容器movable-view源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
可移动的视图容器，在页面中可以拖拽滑动。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/string | 否 | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画；单位支持px（默认）、rpx； | 1.2.0 | |
y | number/string | 否 | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画；单位支持px（默认）、rpx； | 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
3.tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）
版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
