duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix flex layout and input issues

Browse Source 
Replace flex-full with min-h-0 flex-1 on both tab containers to enable proper mobile scrolling. Add mt-auto shrink-0 class to the input area wrapper to keep it pinned to the bottom of the layout.
This commit is contained in:
duanshuwen
2026-05-28 23:40:50 +08:00
parent 5296fbccbc
commit 8e3baccb18
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/home/components/ChatMainList/index.vue
View File

@@ -18,14 +18,14 @@
</div> </div>
<!-- 发现页 --> <!-- 发现页 -->
<div v-show="tabIndex === 0" class="flex-full overflow-hidden" @touchstart.capture="handleScrollAreaTouchStart" <div v-show="tabIndex === 0" class="min-h-0 flex-1 overflow-hidden" @touchstart.capture="handleScrollAreaTouchStart"
@touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove"> @touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
<Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" /> <Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
</div> </div>
<!-- 消息列表（可滚动区域） --> <!-- 消息列表（可滚动区域） -->
<div v-show="tabIndex === 1" class="flex-full overflow-hidden" :scroll-top="scrollTop" @scroll="handleScroll" <div v-show="tabIndex === 1" class="min-h-0 flex-1 overflow-hidden" :scroll-top="scrollTop" @scroll="handleScroll"
@scrolltolower="handleScrollToLower" @touchstart.capture="handleScrollAreaTouchStart" @scrolltolower="handleScrollToLower" @touchstart.capture="handleScrollAreaTouchStart"
@touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove"> @touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
@@ -119,7 +119,7 @@
</div> </div>
<!-- 输入框区域 --> <!-- 输入框区域 -->
<div> <div class="mt-auto shrink-0">
<ChatQuickAccess /> <ChatQuickAccess />
<ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard" <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
:is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction" :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"