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
@@ -5,116 +5,122 @@
|
||||
<ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div class="px-[12px] pt-[12px]">
|
||||
<Welcome :mainPageDataModel="mainPageDataModel" />
|
||||
</div>
|
||||
<div style="margin-bottom: -1px;">
|
||||
<AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
|
||||
<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">
|
||||
<div class="px-[12px] pt-[12px]">
|
||||
<Welcome :mainPageDataModel="mainPageDataModel" />
|
||||
</div>
|
||||
<div style="margin-bottom: -1px;">
|
||||
<AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
|
||||
</div>
|
||||
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<div v-show="tabIndex === 1" class="min-h-0 flex-1 overflow-hidden" :scroll-top="scrollTop" @scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower" @touchstart.capture="handleScrollAreaTouchStart"
|
||||
@touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<div v-show="tabIndex === 1" class="min-h-0 flex-1 overflow-hidden" :scroll-top="scrollTop" @scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower" @touchstart.capture="handleScrollAreaTouchStart"
|
||||
@touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
|
||||
|
||||
<div class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
||||
<template v-if="item.msgType === MessageRole.AI">
|
||||
<ChatCardAI class="flex justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.componentName && isLongTextCard(item.componentName)
|
||||
? ''
|
||||
: item.msg || ''
|
||||
" :isLoading="item.isLoading">
|
||||
<template #content v-if="
|
||||
item.toolCall ||
|
||||
(item.componentName && isLongTextCard(item.componentName))
|
||||
">
|
||||
<div class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
||||
<template v-if="item.msgType === MessageRole.AI">
|
||||
<ChatCardAI class="flex justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.componentName && isLongTextCard(item.componentName)
|
||||
? ''
|
||||
: item.msg || ''
|
||||
" :isLoading="item.isLoading">
|
||||
<template #content v-if="
|
||||
item.toolCall ||
|
||||
(item.componentName && isLongTextCard(item.componentName))
|
||||
">
|
||||
|
||||
<LongTextGuideCardPreview v-if="item.componentName && isLongTextCard(item.componentName)"
|
||||
:componentName="item.componentName" />
|
||||
<LongTextGuideCardPreview v-if="item.componentName && isLongTextCard(item.componentName)"
|
||||
:componentName="item.componentName" />
|
||||
|
||||
<QuickBookingComponent v-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.quickBookingCard
|
||||
" />
|
||||
<DiscoveryCardComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
" />
|
||||
<CreateServiceOrder v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.callServiceCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<OpenMapComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.mapCard
|
||||
" />
|
||||
<GeneratorPhotoComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<AigcPhotoCard v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.videoCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<QuickBookingComponent v-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.quickBookingCard
|
||||
" />
|
||||
<DiscoveryCardComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
" />
|
||||
<CreateServiceOrder v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.callServiceCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<OpenMapComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.mapCard
|
||||
" />
|
||||
<GeneratorPhotoComponent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<AigcPhotoCard v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.videoCard
|
||||
" :toolCall="item.toolCall" />
|
||||
|
||||
<Feedback v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<DetailCardCompontent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<AddCarCrad v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<SurveyQuestionnaire v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName ===
|
||||
CompName.callSurveyQuestionnaire
|
||||
" :toolCall="item.toolCall" />
|
||||
</template>
|
||||
<Feedback v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<DetailCardCompontent v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<AddCarCrad v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||
" :toolCall="item.toolCall" />
|
||||
<SurveyQuestionnaire v-else-if="
|
||||
item.toolCall &&
|
||||
item.toolCall.componentName ===
|
||||
CompName.callSurveyQuestionnaire
|
||||
" :toolCall="item.toolCall" />
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent v-if="item.question" :question="item.question" />
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent v-if="item.question" :question="item.question" />
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="flex justify-end" :text="item.msg" />
|
||||
</template>
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="flex justify-end" :text="item.msg" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<ChatCardOther class="flex justify-center" :text="item.msg">
|
||||
<ChatGuide v-if="chatMsgList.length < 2" />
|
||||
<ActivityListComponent v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length
|
||||
" :activityList="mainPageDataModel.activityList" />
|
||||
<template v-else>
|
||||
<ChatCardOther class="flex justify-center" :text="item.msg">
|
||||
<ChatGuide v-if="chatMsgList.length < 2" />
|
||||
<ActivityListComponent v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length
|
||||
" :activityList="mainPageDataModel.activityList" />
|
||||
|
||||
<!-- 先不展示了，等后续有需求再加回来 false -->
|
||||
<RecommendPostsComponent v-if="
|
||||
false &&
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length
|
||||
" :recommendThemeList="mainPageDataModel.recommendTheme" />
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
<!-- 先不展示了，等后续有需求再加回来 false -->
|
||||
<RecommendPostsComponent v-if="
|
||||
false &&
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length
|
||||
" :recommendThemeList="mainPageDataModel.recommendTheme" />
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
@@ -466,4 +470,4 @@ onBeforeUnmount(() => {
|
||||
clearSettleTimer();
|
||||
clearRecycleTimer();
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user