// components/service/service.ts // 获取应用实例 const app = getApp() 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 ? 44 : 48; const globalTop = app.globalData.top this.setData({ maxTop: barHeight + systemInfo.safeArea.top, 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 < this.data.maxTop) { this.setData({ top: this.data.maxTop }, () => { app.globalData.top = this.data.maxTop }); // 吸附到顶部 } else if(moveHeight >= windowHeight) { this.setData({ top: windowHeight - elementHeight }, () => { app.globalData.top = windowHeight - elementHeight }) } else { this.setData({ top }, () => { app.globalData.top = top }) } } } })