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