WindowBird/OfficeSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

跳跃式位置移动，暂不平滑

Browse Source
This commit is contained in:
WindowBird 2025-11-03 09:18:31 +08:00
parent ea139100e6
commit 9169b7e838
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
pages/index/index.vue
View File

@ -215,6 +215,7 @@ const translateX = ref(-375); // 当前滑动偏移量，初始值设为 -375（
const baseTranslateX = ref(-375); // 基础偏移量 const baseTranslateX = ref(-375); // 基础偏移量
const isAnimating = ref(false); // 是否正在执行动画 const isAnimating = ref(false); // 是否正在执行动画
const isDragging = ref(false); // 是否正在拖动 const isDragging = ref(false); // 是否正在拖动
const isInitialized = ref(false); // 是否已完成初始化
// 初始化屏幕宽度 // 初始化屏幕宽度
const initScreenWidth = () => { const initScreenWidth = () => {
@ -222,10 +223,11 @@ const initScreenWidth = () => {
success: (res) => { success: (res) => {
const width = res.windowWidth || res.screenWidth || 375; const width = res.windowWidth || res.screenWidth || 375;
screenWidth.value = width; screenWidth.value = width;
// 只有在初始值时才更新，避免覆盖用户操作 // 只有在未初始化时才更新，避免覆盖用户操作
if (translateX.value === -375) { if (!isInitialized.value) {
translateX.value = -width; translateX.value = -width;
baseTranslateX.value = -width; baseTranslateX.value = -width;
isInitialized.value = true;
} }
} }
}); });
@ -249,10 +251,10 @@ const handleTouchMove = (e) => {
const deltaX = touch.clientX - touchStartX.value; const deltaX = touch.clientX - touchStartX.value;
const deltaY = Math.abs(touch.clientY - touchStartY.value); const deltaY = Math.abs(touch.clientY - touchStartY.value);
// 如果是水平滑动（水平距离大于垂直距离），阻止页面滚动 // // 如果是水平滑动（水平距离大于垂直距离），阻止页面滚动
if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > 10) { // if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > 10) {
e.preventDefault(); // e.preventDefault();
} // }
// 实时更新偏移量 // 实时更新偏移量
translateX.value = baseTranslateX.value + deltaX; translateX.value = baseTranslateX.value + deltaX;
@ -280,10 +282,10 @@ const handleTouchEnd = (e) => {
if (isHorizontalSwipe) { if (isHorizontalSwipe) {
// 滑动距离超过阈值，自动滑动到下一个页面 // 滑动距离超过阈值，自动滑动到下一个页面
if (deltaX > 0) { if (deltaX > 0) {
// 向右滑动，滑动到前一天的位置 // 向左滑动，滑动到前一天的位置
// slideToPreviousDay(); slideToPreviousDay();
} else { } else {
// 向左滑动，滑动到后一天的位置 // 向右滑动，滑动到后一天的位置
slideToNextDay(); slideToNextDay();
} }
} else { } else {
@ -306,12 +308,12 @@ const resetToCenter = () => {
const slideToPreviousDay = () => { const slideToPreviousDay = () => {
isAnimating.value = true; isAnimating.value = true;
// 从当前位置继续滑动到前一天的完整位置（-screenWidth * 2） // 从当前位置继续滑动到前一天的完整位置（-screenWidth * 2）
const targetX = -screenWidth.value*2; // const targetX = -screenWidth.value*2;
translateX.value = targetX; // translateX.value = targetX;
setTimeout(() => { setTimeout(() => {
// 滑动动画完成后，先暂时禁用 transition // 滑动动画完成后，先暂时禁用 transition
isAnimating.value = false; // isAnimating.value = false;
// 在下一帧更新日期和重置位置（确保没有 transition 动画） // 在下一帧更新日期和重置位置（确保没有 transition 动画）
setTimeout(() => { setTimeout(() => {
@ -327,14 +329,15 @@ const slideToPreviousDay = () => {
console.log(`日期切换：上一天，新日期：${selectedDate.value}`); console.log(`日期切换：上一天，新日期：${selectedDate.value}`);
}, 16); // 一帧的时间，确保 transition 已禁用 }, 16); // 一帧的时间，确保 transition 已禁用
}, 1000); }, 1000);
isAnimating.value = false;
}; };
// 滑动到后一天的位置（动画完成后更新日期） // 滑动到后一天的位置（动画完成后更新日期）
const slideToNextDay = () => { const slideToNextDay = () => {
isAnimating.value = true; isAnimating.value = true;
// 从当前位置继续滑动到后一天的完整位置（0） // 从当前位置继续滑动到后一天的完整位置（0）
const targetX = 0; // const targetX = 0;
translateX.value = targetX; // translateX.value = targetX;
setTimeout(() => { setTimeout(() => {
// 滑动动画完成后，先暂时禁用 transition // 滑动动画完成后，先暂时禁用 transition
@ -353,7 +356,7 @@ const slideToNextDay = () => {
console.log(`日期切换：下一天，新日期：${selectedDate.value}`); console.log(`日期切换：下一天，新日期：${selectedDate.value}`);
}, 16); // 一帧的时间，确保 transition 已禁用 }, 16); // 一帧的时间，确保 transition 已禁用
}, 1000); }, 300);
}; };
// 监听日期变化，重置位置 // 监听日期变化，重置位置