拖动面板

本节目标：理解“拖动面板”的核心思路，并能把它用于实际开发或面试表达。 //// 处理拖动面板 let lastCall = 0; const initialHeight = (safeAreaHeight * 2) / 3; const miniHeight = 100; const draggableAreaHeight = ref(initialHeight); let startY = 0; let initialTouchHeight = 0; const throttle = (func, limit) => { return (...args) => { const now = Date.now(); if (now - lastCall > limit) { lastCall = now; func(...args); } }; }; const onTouchStart = (event) => { startY = event.touches[0].screenY; initialTouchHeight = draggableAreaHeight.value; }; const onTouchMove = (event) => { const moveY = event.touches[0].screenY; const distance = startY - moveY; // 计算移动距离 let newHeight = initialTouchHeight + distance; // 根据移动距离调整高度 newHeight = Math.max(Math.min(newHeight, safeAreaHeight), miniHeight); // 限制高度范围 draggableAreaHeight.value = newHeight; }; const throttledOnTouchMove = throttle(onTouchMove, 5); const onTouchEnd = () => { if (draggableAreaHeight.value > (safeAreaHeight * 3) / 4) { draggableAreaHeight.value = safeAreaHeight; } else if ( draggableAreaHeight.value <= (safeAreaHeight * 3) / 4 && draggableAreaHeight.value > safeAreaHeight / 4 ) { draggableAreaHeight.value = initialHeight; } else { draggableAreaHeight.value = miniHeight; } };