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

// components/service/service.ts
// 获取应用实例
const app = getApp<IAppOption>()
Component({
  /**
   * 组件的初始数据
   */
  data: {
    popShow: false,
    btnShow: true,
    maxTop: 0,
    top: 0,  // 初始的上偏移
    startY: 0, // 触摸起始点 Y 坐标
    windowWidth: 0, // 屏幕宽度
    windowHeight: 0, // 屏幕高度
    elementHeight: 60 // 元素高度
  },
  lifetimes: {
    attached() {
      // 获取屏幕宽高
      const systemInfo = wx.getWindowInfo();
      const isAndroid = systemInfo.platform === 'android'
      const isDevtools = systemInfo.platform === 'devtools'
      const barHeight = !isAndroid ? 
      const globalTop = app.globalData.top
      this.setData({
        windowWidth: systemInfo.windowWidth,
        windowHeight: systemInfo.windowHeight,
        top: globalTop
      });
    }
  },
  /**
   * 组件的方法列表
   */
  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;
  
      // 更新元素的垂直位置
      app.globalData.top = this.data.top + deltaY
      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 }, () => {
          app.globalData.top = 0
        }); // 吸附到顶部
      } else if(moveHeight >= windowHeight) {
        this.setData({ top: windowHeight - elementHeight }, () => {
          app.globalData.top = windowHeight - elementHeight
        })
      } else {
        this.setData({ top }, () => {
          app.globalData.top = top
        })
      }
    }
  }
})