在使用movable-view之前先了解一下movable-view的主要参数；
movable-area
基础库 1.2.0 开始支持，低版本需做兼容处理。
movable-view 的可移动区域
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| scale-area | Boolean | false | 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area | 1.9.90 |
注意：movable-area 必须设置width和height属性，不设置默认为10px
movable-view
基础库 1.2.0 开始支持，低版本需做兼容处理。
可移动的视图容器，在页面中可以拖拽滑动
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| direction | String | none | movable-view的移动方向，属性值有all、vertical、horizontal、none | |
| inertia | Boolean | false | movable-view是否带有惯性 | |
| out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 | |
| x | Number / String | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | ||
| y | Number / String | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | ||
| damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | |
| friction | Number | 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: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） | 1.9.90 | |
| bindscale | EventHandle | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回 | 1.9.90 |
除了基本事件外，movable-view提供了两个特殊事件
| 类型 | 触发条件 | 最低版本 |
|---|---|---|
| htouchmove | 初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch | 1.9.90 |
| vtouchmove | 初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch | 1.9.90 |
movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
注意：movable-view必须在
<movable-area/>组件中，并且必须是直接子节点，否则不能移动。
一、制作一个自由移动的小球；
给
direction设置为all；
all
Wxml:
<movable-area class='wrapper'>
<movable-view direction="all" class="content color-g"></movable-view>
</movable-area>
二、只能水平移动的小球；
给direction设置为horizontal；
horizontal
<movable-area class='wrapper'>
<movable-view direction="horizontal" class="content color-r"></movable-view>
</movable-area>
三、只能垂直移动的小球；
给direction设置为vertical；
vertical
注：设置direction为none时，移动视窗的小块不能移动；
<movable-area class='wrapper'>
<movable-view direction="vertical" class="content color-b"></movable-view>
</movable-area>
WXSS:
.wrapper{ width:100%; height:350rpx; background-color: pink; }
.content{ width:50rpx; height:50rpx; border-radius: 50% }
.color-g{ background-color: green; }
.color-r{ background-color:red; }
.color-b{ background-color:blue; }
网友评论