微信小程序movable-area

movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。

本次小程序实现两个按钮的拖动互换，垂直移动。wxml如下：

<movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view bindtouchend="kg" style="height: 50px; width: 150px; background: blue;" x="{{x1}}" y="{{y1}}" direction="vertical">
    <button bindtap="gg">客服哥哥</button>
    </movable-view>
     <movable-view bindtouchend="km" style="height: 50px; width: 150px; background: green;" x="{{x2}}" y="{{y2}}" direction="vertical">
    <button bindtap="mm">客服妹妹</button>
    </movable-view>
  </movable-area>

js文件如下，拖动一个按钮时，另一个按钮到对面。

Page({
  data: {
    x1: 10,
    y1: 10,
    x2: 10,
    y2: 100
  },
  gg: function () {
    wx.makePhoneCall({
      phoneNumber: '12345' //仅为示例，并非真实的电话号码
    })
  },
  mm: function () {
    wx.makePhoneCall({
      phoneNumber: '54321' //仅为示例，并非真实的电话号码
    })
  },
  kg: function (e) {
    console.log(e.changedTouches[0].pageY)
    var y = e.changedTouches[0].pageY
    if (y < 100) {
      this.setData({
        x1: 10,
        y1: 10,
        x2: 10,
        y2: 100
      })
    }
    else {
      this.setData({
        x2: 10,
        y2: 10,
        x1: 10,
        y1: 100
      })
    }
  },
  km: function (e) {
    console.log(e.changedTouches[0].pageY)
    var y = e.changedTouches[0].pageY
    if (y > 100) {
      this.setData({
        x1: 10,
        y1: 10,
        x2: 10,
        y2: 100
      })
    }
    else {
      this.setData({
        x2: 10,
        y2: 10,
        x1: 10,
        y1: 100
      })
    }
  },
})