微信小程序开发（七）：movable-area和movable-view

movable-area组件和movable-view组件组合使用，可以实现类似动画效果。

movable-area给movable-view划定一个可移动的区域，movable-view是一个可移动的容器，它可以在movable-area划定的区域内拖拽滑动，需要保证movable-view在movable-area组件内部，并且必须是直接子节点。

直白点说，movable-view作为movable-area的直接子节点时，可以在movable-area规定的范围内拖拽滑动、缩小放大。

movable-view的属性、方法

属性

direction：设置movable-view的可移动方向，属性值有all（允许任意方向移动）、vertical（只允许纵向移动）、horizontal（只允许横向移动）、none（不允许移动）。

inertia：movable-view移动时是否带有惯性（就是拖动中松开手之后是否会继续滑动一段距离），默认值false，不滑动。

friction：摩擦系数，惯性滑动时，friction值越大滑动停止的越快，可以类比物理中的摩擦系数，摩檫系数越大，滑动摩擦力越大，滑动物体停止的越快。（friction的值必须设置一个大于0的数，否则会默认为2）

out-of-bounds：movable-view拖动是否可以超出movable-area规定的区域，默认值false，不可超出规定区域，如果属性值设置为true，movable-view可以被拖拽出规定区域一段距离，但是松开手之后movable-view会自动弹回规定区域。

damping：阻尼系数，控制movable-view在可移动范围内位置改变和过节回弹时的变动速度，默认值为20，值越大速度越快。

disabled：是否禁用

animation：是否使用动画

方法

bindchange：拖动过程中movable-view坐标位置变动时触发的事件

htouchmove：事件处理函数，初次手指触摸后横向移动时触发，会同时捕获到touchmove事件

vtouchmove：事件处理函数，初次手指触摸后纵向移动时触发，会同时捕获到touchmove事件

movable-view的双指缩放功能

scale属性设置movable-view是否支持双指缩放，当scale属性的值为true时，movable-view支持双指缩放，但是这时候只有当两个手指触点都在movable-view范围内时，才能对这个movable-view进行缩小放大操作。

扩大双指缩放的默认范围

当movable-view面积很小，无法容纳两个手指进行缩放操作时，我们期望把缩放手势的生效区域扩大，这时候可以在movable-area组件上设置scale-area属性，这个属性默认值为false，我们可以在movable-area中设置为true，这时候双指缩放的有效区域就扩大到了整个movable-area范围。

设置缩放倍数

scale-min：定义movable-view允许的最小缩放倍数，默认值为0.5
scale-max：定义movable-view允许的最大缩放倍数，默认值为10
scale-value：定义缩放倍数，默认值为1，允许设置的值为0.5-10

缩放时触发的事件

bindscale：在movable-view组件上绑定bindscale事件，双指缩放时触发

movable-view在movable-area中的位置

movable-view组件默认为绝对定位，且top和left属性值为0px，所以如果没有特备设置的话，movable-view的初始位置位于movable-area的左上角。

可以通过movable-view的x和y属性设置movable-view在x轴和y轴上的偏移量。改变x或者y的值会触发移动，这两个属性值的单位支持px（默认）、rpx。

一个简单的小例子

<movable-area class="area">
  <movable-view class="view" direction="all" inertia="true" out-of-bounds="true" x="{{v1.x}}" y="{{v1.y}}" damping="10" bindchange="change">
    1
  </movable-view>
  <movable-view class="view2" direction="all" inertia="true" out-of-bounds="true" x="{{v2.x}}" y="{{v2.y}}" damping="10" bindchange="change">
    2
  </movable-view>
  <movable-view class="view3" direction="all" inertia="true" out-of-bounds="true" x="{{v3.x}}" y="{{v3.y}}" damping="10" bindchange="change">
    3
  </movable-view>
</movable-area>
<button type="primary" bindtap="tap" style="width: 100%;margin-top:0px;">点击排序</button>

.area {
  background-color: aqua;
  width: 750rpx; 
  height: 300px;
}

.view {
  background-color: bisque; 
  width: 30px; 
  height: 30px;
}

.view2 {
  background-color: rgb(240, 9, 86); 
  width: 30px; 
  height: 30px;
}

.view3 {
  background-color: rgb(22, 216, 109); 
  width: 30px; 
  height: 30px;
}

Page({
  data: {
    v1:{
      x:100,
      y:100
    },
    v2:{
      x:0,
      y:0
    },
    v3:{
      x:330,
      Y:10
    }
  },

  onLoad() {
   
  },

  change(event){
    console.log(event);
  },

  tap(){
    this.setData({
      v1:{
        x:0,
        y:0
      },
      v2:{
        x:30,
        y:0
      },
      v3:{
        x:60,
        y:0
      }
    });
  }
})