小程序--可移動的懸浮按鈕

<view>

      <button catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" catchtap="evaluateEvt" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 80px;height:50px;position:fixed;background:#ff6700;line-height:50px;font-size: 28rpx;;color:#fff;padding: 0;font-weight: 500;">
  <view>課程建議</view>
  </button>
  
</view>






let startPoint;
Page({
  data: {
    windowHeight: '',
    windowWidth: '',
    buttonTop: 0,
    buttonLeft: 0
  },
  onLoad: function () {
    // 計算高寬度，占滿window
    let that = this;
    //  高度自適應
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight:  res.windowHeight,
          windowWidth:  res.windowWidth,
          buttonTop:  res.windowHeight - 120, //懸浮按鈕初始位置
          buttonLeft:  res.windowWidth - 100 //懸浮按鈕初始位置
        });
      }
    });
  },
  buttonStart: function (e) {
    startPoint = e.touches[0]
  },
  buttonMove: function (e) {
    let endPoint = e.touches[e.touches.length - 1];
    let translateX = endPoint.clientX - startPoint.clientX;
    let translateY = endPoint.clientY - startPoint.clientY;
    startPoint = endPoint;
    let buttonTop = this.data.buttonTop + translateY;
    let buttonLeft = this.data.buttonLeft + translateX;
    //判斷是移動否超出屏幕 -- 80為按鈕的寬度
    if (buttonLeft + 80 >= this.data.windowWidth){
      buttonLeft = this.data.windowWidth - 80;
    }
    if (buttonLeft <= 0){
      buttonLeft = 0;
    }
    if (buttonTop <= 0){
      buttonTop = 0
    }
    // 50是按鈕的高度
    if (buttonTop + 50 >= this.data.windowHeight){
      buttonTop = this.data.windowHeight - 50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },
  buttonEnd: function (e) {
    
  },
// 點擊懸浮按鈕
  evaluateEvt(){
    console.log('點擊懸浮按鈕')
  },
})