微信小程序 -- 拖动悬浮按钮的实现

1. 适配屏幕以及头部tab

如图所示 上下左右边界值

html:

      <!-- 刷新 -->
      <view class='refresh' catchtap='refresh' catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{ btnTop }}px;left:{{ btnLeft }}px">
        <image src='../../images/order/order_btn_refresh.png'></image>
      </view>

css:

/* 刷新 */

.refresh {
  width: 90rpx;
  height: 90rpx;
  position: fixed;
  z-index: 200;
  border-radius: 50%;
}

.refresh image {
  width: 90rpx;
  height: 90rpx;
  background-color: transparent;
}

js：

  data: {
    // 刷新按钮位置
    btnTop: 0,
    btnLeft: 0,
    windowHeight: '',
    windowWidth: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

    // 获取适配参数
    $getWXSystemInfo().then(res => {
      let {
        isIpx
      } = res
      this.setData({
        isIpx
      }, () => {
        // 获取屏幕的大小
        $getSystemInfo().then(res => {
          console.log(res)
          let windowHeight = res.windowHeight
          let windowWidth = res.windowWidth
          let btnTop = isIpx ? windowHeight - 134 : windowHeight - 100
          this.setData({
            windowHeight,
            windowWidth,
            btnLeft: windowWidth - 45,
            btnTop
          })
        })
      })
    })
  },

  // 刷新按钮开始移动
  buttonStart(e) {
    // 获取起始点
    this.setData({
      startPoint: e.touches[0]
    })
  },

  // 刷新按钮移动中
  buttonMove(e) {
    let {
      startPoint,
      btnTop,
      btnLeft,
      windowWidth,
      windowHeight,
      isIpx
    } = this.data
    // 获取结束点
    let endPoint = e.touches[e.touches.length - 1]
    // 计算移动距离相差
    let translateX = endPoint.clientX - startPoint.clientX
    let translateY = endPoint.clientY - startPoint.clientY
    // 初始化
    startPoint = endPoint
    // 赋值
    btnTop = btnTop + translateY
    btnLeft = btnLeft + translateX

    // 临界值判断
    if (btnLeft + 45 >= windowWidth) {
      btnLeft = windowWidth - 45;
    }
    if (btnLeft <= 0) {
      btnLeft = 0;
    }
    // 根据屏幕匹配临界值
    let topSpace = 100
    if (isIpx) {
      topSpace = 134
    } else {
      topSpace = 100
    }
    if (btnTop + topSpace >= windowHeight) {
      btnTop = windowHeight - topSpace
    }
    // 顶部tab临界值
    if (btnTop <= 43) {
      btnTop = 43
    }
    this.setData({
      btnTop,
      btnLeft,
      startPoint
    })
  },

  buttonEnd: function(e) {

  },