跳跃式位置移动,暂不平滑,观感尚可
This commit is contained in:
parent
9169b7e838
commit
ef7c28c767
|
|
@ -301,19 +301,20 @@ const resetToCenter = () => {
|
|||
|
||||
setTimeout(() => {
|
||||
isAnimating.value = false;
|
||||
}, 1000);
|
||||
}, 300); // 与 transition 时间一致(0.3s)
|
||||
};
|
||||
|
||||
// 滑动到前一天的位置(动画完成后更新日期)
|
||||
const slideToPreviousDay = () => {
|
||||
isAnimating.value = true;
|
||||
// 从当前位置继续滑动到前一天的完整位置(-screenWidth * 2)
|
||||
// const targetX = -screenWidth.value*2;
|
||||
// translateX.value = targetX;
|
||||
const targetX = -screenWidth.value;
|
||||
translateX.value = targetX;
|
||||
|
||||
// 等待动画完成(300ms,与 transition 时间一致)
|
||||
setTimeout(() => {
|
||||
// 滑动动画完成后,先暂时禁用 transition
|
||||
// isAnimating.value = false;
|
||||
isAnimating.value = false;
|
||||
|
||||
// 在下一帧更新日期和重置位置(确保没有 transition 动画)
|
||||
setTimeout(() => {
|
||||
|
|
@ -327,18 +328,18 @@ const slideToPreviousDay = () => {
|
|||
baseTranslateX.value = -screenWidth.value;
|
||||
|
||||
console.log(`日期切换:上一天,新日期:${selectedDate.value}`);
|
||||
}, 16); // 一帧的时间,确保 transition 已禁用
|
||||
}, 1000);
|
||||
isAnimating.value = false;
|
||||
}, 0); // 一帧的时间,确保 transition 已禁用
|
||||
}, 300); // 与 transition 时间一致(0.3s)
|
||||
};
|
||||
|
||||
// 滑动到后一天的位置(动画完成后更新日期)
|
||||
const slideToNextDay = () => {
|
||||
isAnimating.value = true;
|
||||
// 从当前位置继续滑动到后一天的完整位置(0)
|
||||
// const targetX = 0;
|
||||
// translateX.value = targetX;
|
||||
const targetX = -screenWidth.value;
|
||||
translateX.value = targetX;
|
||||
|
||||
// 等待动画完成(300ms,与 transition 时间一致)
|
||||
setTimeout(() => {
|
||||
// 滑动动画完成后,先暂时禁用 transition
|
||||
isAnimating.value = false;
|
||||
|
|
@ -356,7 +357,7 @@ const slideToNextDay = () => {
|
|||
|
||||
console.log(`日期切换:下一天,新日期:${selectedDate.value}`);
|
||||
}, 16); // 一帧的时间,确保 transition 已禁用
|
||||
}, 300);
|
||||
}, 300); // 与 transition 时间一致(0.3s)
|
||||
};
|
||||
|
||||
// 监听日期变化,重置位置
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user