Browse Source

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

dev
宋杰 10 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 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 () => { const smoothScrollToBottom = async () => {
// console.log(""); // console.log("");
// await nextTick(); // await nextTick();
const container = tabContent.value;
const container = getCurrentScrollContainer();
// console.log(container, 'container') // console.log(container, 'container')
// console.log(isScrolling.value, 'isScrolling.value') // console.log(isScrolling.value, 'isScrolling.value')
if (!container) return; if (!container) return;
@ -403,7 +414,7 @@ watch(
watch( watch(
() => chatStore.dbqbClickRecord, () => chatStore.dbqbClickRecord,
async (newValue, oldValue) => { async (newValue, oldValue) => {
const container = tabContent.value;
const container = getCurrentScrollContainer();
if (!container) return; if (!container) return;
await nextTick(); // DOM await nextTick(); // DOM
@ -484,7 +495,9 @@ setTimeout(() => {
}, 800); }, 800);
const heightListener = () => { const heightListener = () => {
const tabContainer = tabContent.value;
const tabContainer = getCurrentScrollContainer();
if (!tabContainer) return;
let befortop = 0; let befortop = 0;
const scrollHandler = () => { const scrollHandler = () => {
@ -634,8 +647,9 @@ const touchmoveHandler = (e) => {
return; return;
} }
} }
//
const isScrollableArea = e.target.closest(".tab-content");
//
const currentContainer = getCurrentScrollContainer();
const isScrollableArea = currentContainer && currentContainer.contains(e.target);
// //
if (!isScrollableArea) { if (!isScrollableArea) {
@ -859,14 +873,37 @@ onUnmounted(() => {
</div> </div>
</div> </div>
</section> </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 <div
v-show="activeTab === 'AiEmotion'"
class="tab-content" class="tab-content"
:class="{ :class="{
pcTabContent: !isMobile, pcTabContent: !isMobile,
}" }"
ref="tabContent"
ref="tabContentAiEmotion"
> >
<component <component
v-if="activeTab === 'AiEmotion'"
:is="activeComponent" :is="activeComponent"
:messages="messages" :messages="messages"
@updateMessage="updateMessage" @updateMessage="updateMessage"

Loading…
Cancel
Save