// 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 }) } } } })