小程序悬浮按钮组件

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

<movable-area class="movable_area" >
  <movable-view direction="{{direction}}" class="movable_view" x='{{btn_x}}' y="{{btn_y}}" bindtouchend="touchEnd">
    <button
        form-type="{{form_type}}"
        class="btn x-class"
        hover-class="btn-hover" catchtap="{{url?'handleTap':''}}" open-type="{{ openType }}" data-index="{{index}}" disabled="{{disabled}}"
        app-parameter="{{ appParameter }}" hover-stop-propagation="{{ hoverStopPropagation }}" 
        session-from="{{ sessionFrom }}" send-message-title="{{ sendMessageTitle }}" 
        send-message-path="{{ sendMessagePath }}" send-message-img="{{ sendMessageImg }}" show-message-card="{{ showMessageCard }}"
        catchcontact="bindcontact" catchgetphonenumber="bindgetphonenumber" binderror="binderror" plain="true">
        <image wx:if="{{button_img}}" src="{{button_img}}" class="movable_img" style="width: {{button_img_width}}rpx;height: {{button_img_height}}rpx;"></image>
        <slot></slot>
    </button>
  </movable-view>
</movable-area>

.movable_area{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 将移动区域设为整个窗口 
  pointer-events: none; //对点击事件不做任何反应 
  z-index: 1111111;  //防止页面组件遮挡
}
.movable_view{
  pointer-events: auto; //让可移动视图自由拖动
  //高度和宽度自动根据内容的变化而变化（可移动的按钮可能是一个icon或者文字）
  height: auto;
  width: auto;
}

// buttonBehavior：封装好的button相关的js代码，有点击事件，可放功能事件等）
var buttonBehavior = require('../common/button_behaior.js');
Component({
  behaviors: [buttonBehavior],
  /**
   * 组件的属性列表
   */
  properties: {
    //可移动的方向
    direction:{
      type:String,
      value:'all'
    },
    //按钮的icon
    button_img:{
      type:String,
      value:'/static/wodekaquan.png'
    },
    //按钮图片的宽度，单位rpx
    button_img_width:{
      type:Number,
      value:150
    },
    //按钮图片的高度，单位rpx
    button_img_height:{
      type:Number,
      value:150
    },
    //移动按钮的初始x轴坐标
    btn_x:{
      type:String,
      value:'580rpx'
    },
    //移动按钮的初始y轴坐标
    btn_y:{
      type:String,
      value:'750rpx'
    }
  },
  lifetimes: {
    created: function() {
      //获取设备宽度
      wx.getSystemInfo({
        success: (result) => {
          this.data.screenWidth = result.screenWidth;
          this.data.btn_origin_x = this.data.btn_x;
        },
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    //移动按钮的初始x轴坐标
    btn_origin_x:0,
    //屏幕的宽度，用于计算移动结束后，按钮是往左还是往右悬浮
    screenWidth:375
  },


  /**
   * 组件的方法列表
   */
  methods: {
    touchEnd(e){
      this.createSelectorQuery().select('.movable_view').boundingClientRect((res)=>{
        if(res.left<this.data.screenWidth/2){
          return this.setData({btn_x:'0px',btn_y:res.top+'px'})
        }
        this.setData({btn_x:this.data.btn_origin_x,btn_y:res.top+'px'});
      }).exec();
    }
  }
})