微信原生小程序一键制作悬浮球

// back-home.js
Component({
    properties: {
      itemWidth: {
        type: Number,
        value: 64,
      },
      itemHeight: {
        type: Number,
        value: 64,
      },
      gapWidth: {
        type: Number,
        value: 10,
      },
      coefficientHeight: {
        type: Number,
        value: 0.72,
      },
    },
    data: {
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
      top: 0,
      left: 0,
      clientWidth: 0,
      clientHeight: 0,
    },
    attached() {
      const systemInfo = wx.getSystemInfoSync();
      this.setData({
        clientWidth:systemInfo.windowWidth,
        clientHeight:systemInfo.windowHeight
      })

      this.setData({
        left: this.data.clientWidth - this.data.itemWidth - this.data.gapWidth,
        top: this.data.clientHeight *this.data.coefficientHeight,
      });
    },
    methods: {
      handleTouchStart(e) {
          this.setData({
            startX:e.touches[0].clientX,
            startY:e.touches[0].clientY
          })
      },
      handleTouchMove(e) {
        const touch = e.touches[0];
        const offsetX = touch.clientX - this.data.startX;
        const offsetY = touch.clientY - this.data.startY;
        this.data.moveX = offsetX;
        this.data.moveY = offsetY;
        this.setData({
          left: this.data.left + offsetX,
          top: this.data.top + offsetY,
        });
        this.data.startX = touch.clientX;
        this.data.startY = touch.clientY;
      },
      handleTouchEnd() {
        this.adjustPosition();
        this.setData({
          moveX: 0,
          moveY: 0,
        });
      },
      goCreatePage() {
        this.triggerEvent('goManage');
      },
      adjustPosition() {
        if (this.data.left < 0  || this.data.left<this.data.clientWidth/3) {
          this.setData({ left: 0 });
        } else if (this.data.left > this.data.clientWidth - this.data.itemWidth - this.data.gapWidth || this.data.left>this.data.clientWidth/3) {
          this.setData({ left: this.data.clientWidth - this.data.itemWidth - this.data.gapWidth });
        }
  
        if (this.data.top < 0) {
          this.setData({ top: 0 });
        } else if (this.data.top > this.data.clientHeight - this.data.itemHeight - this.data.gapWidth) {
          this.setData({ top: this.data.clientHeight - this.data.itemHeight - this.data.gapWidth });
        }
      },
    },
  });
  

wxml文件

<!-- back-home.wxml -->
<view
  class="backHome"
  style="width: {{itemWidth}}px; height: {{itemHeight}}px; left: {{left}}px; top: {{top}}px;"
  bindtap="goCreatePage"
  bindtouchstart="handleTouchStart"
  bindtouchmove="handleTouchMove"
  bindtouchend="handleTouchEnd"
>
  <image src="../../assets/image/GoBook.png" mode="widthFix"></image>
</view>

wxss文件

/* back-home.wxss */
.backHome {
    position: fixed;
    z-index: 9;
  }
  
  .backHome image {
    width: 100%;
    height: 100%;
  }