classroom-music-activation/miniprogram/components/service/service.ts

// components/service/service.ts
Component({
  /**
   * 组件的属性列表
   */
  // properties: {
  //   popShow: {
  //     type: Boolean,
  //     default: false
  //   }
  // },

  /**
   * 组件的初始数据
   */
  data: {
    popShow: false,
    top: 0,  // 初始的上偏移
    startX: 0, // 触摸起始点 X 坐标
    startY: 0, // 触摸起始点 Y 坐标
    windowWidth: 0, // 屏幕宽度
    windowHeight: 0, // 屏幕高度
    elementHeight: 60 // 元素高度
  },
  attached() {
    // 获取屏幕宽高
    const systemInfo = wx.getWindowInfo();
    this.setData({
      windowWidth: systemInfo.windowWidth,
      windowHeight: systemInfo.windowHeight,
      top: systemInfo.windowHeight - 180
    });
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onClose() {
      // this.triggerEvent('changePop', false)
      this.setData({
        popShow: false
      })
    },
    onOpen() {
      // 
    },
    onShow() {
      this.setData({
        popShow: true
      })
    },
    onTouchStart(e: any) {
      // 记录触摸起始点的 Y 坐标
      this.setData({
        startY: e.touches[0].clientY
      });
    },
  
    onTouchMove(e: any) {
      // 计算上下方向的偏移量
      const deltaY = e.touches[0].clientY - this.data.startY;
  
      // 更新元素的垂直位置
      this.setData({
        top: this.data.top + deltaY,
        startY: e.touches[0].clientY
      });
    },
  
    onTouchEnd() {
      const { top, windowHeight, elementHeight } = this.data;

      // 计算与顶部和底部边界的距离
      const distanceTop = top;
      const moveHeight = top + elementHeight
      // 判断元素与顶部和底部的距离，选择最近的边界
      if (distanceTop < 0) {
        this.setData({ top: 0 }); // 吸附到顶部
      } else if(moveHeight >= windowHeight) {
        this.setData({ top: windowHeight - elementHeight })
      } else {
        this.setData({ top })
      }
    }
  }
})