Browse Source

解决两个模型共用同一个滚动条的问题;

songjie/feature-20250628160649-上线前优化
宋杰 8 hours ago
parent
commit
854f39955a
  1. 51
      src/views/homePage.vue

51
src/views/homePage.vue

@ -361,13 +361,24 @@ const showCount = () => {
//
const tabContent = ref(null);
const tabContentAIchat = ref(null);
const tabContentAiEmotion = ref(null);
const isScrolling = ref(false); //
//
const getCurrentScrollContainer = () => {
if (activeTab.value === 'AIchat') {
return tabContentAIchat.value;
} else if (activeTab.value === 'AiEmotion') {
return tabContentAiEmotion.value;
}
return null;
};
const smoothScrollToBottom = async () => {
// console.log("");
// await nextTick();
const container = tabContent.value;
const container = getCurrentScrollContainer();
// console.log(container, 'container')
// console.log(isScrolling.value, 'isScrolling.value')
if (!container) return;
@ -403,7 +414,7 @@ watch(
watch(
() => chatStore.dbqbClickRecord,
async (newValue, oldValue) => {
const container = tabContent.value;
const container = getCurrentScrollContainer();
if (!container) return;
await nextTick(); // DOM
@ -484,7 +495,9 @@ setTimeout(() => {
}, 800);
const heightListener = () => {
const tabContainer = tabContent.value;
const tabContainer = getCurrentScrollContainer();
if (!tabContainer) return;
let befortop = 0;
const scrollHandler = () => {
@ -634,8 +647,9 @@ const touchmoveHandler = (e) => {
return;
}
}
//
const isScrollableArea = e.target.closest(".tab-content");
//
const currentContainer = getCurrentScrollContainer();
const isScrollableArea = currentContainer && currentContainer.contains(e.target);
//
if (!isScrollableArea) {
@ -859,14 +873,37 @@ onUnmounted(() => {
</div>
</div>
</section>
<!-- AIchat页面的独立滚动容器 -->
<div
v-show="activeTab === 'AIchat'"
class="tab-content"
:class="{
pcTabContent: !isMobile,
}"
ref="tabContentAIchat"
>
<component
v-if="activeTab === 'AIchat'"
:is="activeComponent"
:messages="messages"
@updateMessage="updateMessage"
@sendMessage="sendMessage"
@ensureAIchat="ensureAIchat"
@enableInput="enableInput"
/>
</div>
<!-- AiEmotion页面的独立滚动容器 -->
<div
v-show="activeTab === 'AiEmotion'"
class="tab-content"
:class="{
pcTabContent: !isMobile,
}"
ref="tabContent"
ref="tabContentAiEmotion"
>
<component
v-if="activeTab === 'AiEmotion'"
:is="activeComponent"
:messages="messages"
@updateMessage="updateMessage"

Loading…
Cancel
Save