fix(scroll): improve scroll and touch event handling across components

- modify Discovery component's overflow settings and scroll wrapper classes
- fix CardSwiper touch event logic: remove unnecessary touchmove prevention, add proper event propagation and conditional default handling
- restructure ChatMainList to use a unified scroll container for both discovery and chat tabs, add scroll reference, refine scroll calculation and implement smooth scroll to bottom
- fix missing newline at end of CardSwiper script file
This commit is contained in:
duanshuwen
2026-05-29 23:40:13 +08:00
parent ce1dac077e
commit 567776f975
3 changed files with 129 additions and 105 deletions

View File

@@ -5,6 +5,10 @@
<ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
</div>
<div ref="mainScrollRef"
class="min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
@scroll="handleScroll" @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
@touchmove="handleScrollAreaTouchMove">
<div class="relative">
<img class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl" style="height: 252px;" />
<div class="absolute bottom-0 left-0 right-0 flex-1">
@@ -18,8 +22,9 @@
</div>
<!-- 发现页 -->
<div v-show="tabIndex === 0" class="min-h-0 flex-1 overflow-hidden" @touchstart.capture="handleScrollAreaTouchStart"
@touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
<div v-show="tabIndex === 0" class="min-h-0 flex-1 overflow-hidden"
@touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
@touchmove="handleScrollAreaTouchMove">
<Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
</div>
@@ -117,6 +122,7 @@
</template>
</div>
</div>
</div>
<!-- 输入框区域 -->
<div class="mt-auto shrink-0">
@@ -181,6 +187,7 @@ const appStore = useAppStore();
/// 输入框组件引用
const inputAreaRef = ref(null);
const mainScrollRef = ref(null);
const topNavBarRef = ref();
const notitceConent = ref(null);
@@ -331,10 +338,17 @@ const handleScroll = (e) => {
hideKeyboardByScroll();
}
const detail = e.detail;
topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value;
const currentScrollTop = detail.scrollTop;
const currentScrollTop = Number(e?.detail?.scrollTop ?? e?.target?.scrollTop ?? 0);
const scrollEl = e?.target;
if (topNavBarRef.value) {
topNavBarRef.value.show = currentScrollTop > welcomeHeight.value;
}
if (
scrollEl &&
scrollEl.scrollHeight - currentScrollTop - scrollEl.clientHeight < 8
) {
isAutoScroll.value = true;
}
// 如果向上滚动 (当前位置小于上一次记录的位置)
if (currentScrollTop < lastScrollTop - 2) {
// 增加 2px 阈值防止抖动
@@ -361,6 +375,12 @@ const scrollToBottom = (force = false) => {
// 使用更大的值确保滚动到真正的底部
const targetScrollTop = 99999 + Math.random();
scrollTop.value = targetScrollTop;
if (mainScrollRef.value && typeof mainScrollRef.value.scrollTo === "function") {
mainScrollRef.value.scrollTo({
top: mainScrollRef.value.scrollHeight,
behavior: "smooth",
});
}
});
};

View File

@@ -1,5 +1,5 @@
<template>
<div class="w-full" @touchstart="handleTouchStart" @touchmove.stop.prevent="handleTouchMove"
<div class="w-full" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
@touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
<div :class="['relative w-full h-[270px] overflow-hidden', list.length <= 1 ? 'overflow-visible' : '']">
<div v-for="slot in renderSlots" :key="slot.key"
@@ -424,6 +424,10 @@ const handleTouchMove = (event) => {
return;
}
event.stopPropagation();
if (event.cancelable) {
event.preventDefault();
}
deltaX.value = clamp(moveX, -hiddenOffset, hiddenOffset);
};

View File

@@ -1,8 +1,8 @@
<template>
<div class="flex flex-col h-full overflow-hidden">
<div class="flex flex-col overflow-visible">
<FindTabs v-if="discoveryTabs.length" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
<div class="discovery-scroll flex-1" overflow-y @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch"
<div class="discovery-scroll" @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch"
@scroll="emitScrollTouch">
<CardSwiper v-if="discoveryCards.length" :list="discoveryCards" @didSelectItem="handleCardClick" />