chore:输入框不被遮挡了

This commit is contained in:
2026-04-22 11:59:58 +08:00
parent d8e75a0c9e
commit 2cc0162435
2 changed files with 53 additions and 15 deletions

View File

@@ -7,6 +7,7 @@
:scroll-into-view="scrollIntoViewId" :scroll-into-view="scrollIntoViewId"
:scroll-top="scrollTop" :scroll-top="scrollTop"
:scroll-with-animation="true" :scroll-with-animation="true"
:style="chatMessagesStyle"
@scroll="onScroll"> @scroll="onScroll">
<!-- 加载更多历史消息 --> <!-- 加载更多历史消息 -->
@@ -187,7 +188,7 @@
</scroll-view> </scroll-view>
<!-- 输入区域 --> <!-- 输入区域 -->
<view class="input-area"> <view class="input-area" :style="inputAreaStyle" >
<view class="input-tools"> <view class="input-tools">
<button class="tool-btn" @click="showMoreTools" style="display: none;"> <button class="tool-btn" @click="showMoreTools" style="display: none;">
<text class="iconfont icon-plus">...</text> <text class="iconfont icon-plus">...</text>
@@ -205,6 +206,8 @@
:maxlength="500" :maxlength="500"
:auto-height="true" :auto-height="true"
:show-confirm-bar="false" :show-confirm-bar="false"
:adjust-position="true"
:cursor-spacing="150"
@confirm="sendMessage" @confirm="sendMessage"
@input="onInput" /> @input="onInput" />
@@ -431,7 +434,8 @@ export default {
scrollTimer: null, scrollTimer: null,
lastScrollTop: 0, lastScrollTop: 0,
historyOffset: 0, historyOffset: 0,
isFetchingHistory: false isFetchingHistory: false,
keyboardHeight: 0
} }
}, },
computed: { computed: {
@@ -443,6 +447,20 @@ export default {
}, },
aiAvatarUrl() { aiAvatarUrl() {
return this.$util.img(IMAGE_CONFIG.aiAvatar); return this.$util.img(IMAGE_CONFIG.aiAvatar);
},
chatMessagesStyle() {
// 键盘高度是像素值,我们需要为聊天区域添加足够的底部padding
// 确保最后一条消息在键盘上方可见
const extraPadding = 200; // 额外的padding(px)
const totalPadding = this.keyboardHeight > 0 ? this.keyboardHeight + extraPadding : 150; // 默认150px
return {
paddingBottom: totalPadding + 'px'
};
},
inputAreaStyle() {
return {
bottom: this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px'
};
} }
}, },
onShow() { onShow() {
@@ -502,6 +520,15 @@ export default {
} }
}, },
methods: { methods: {
// 更新键盘高度
updateKeyboardHeight(height) {
this.keyboardHeight = height;
if (height > 0) {
this.$nextTick(() => {
this.scrollToBottom();
});
}
},
// 【新增:会话 ID 本地缓存方法】 // 【新增:会话 ID 本地缓存方法】
saveConversationIdToLocal(convId) { saveConversationIdToLocal(convId) {
if (convId) { if (convId) {
@@ -1654,9 +1681,9 @@ $radius-lg: 36rpx;
box-sizing: border-box; box-sizing: border-box;
min-height: 0; /* 重要:防止flex元素溢出 */ min-height: 0; /* 重要:防止flex元素溢出 */
/* 微信小程序专属样式:给聊天消息列表增加底部内边距,避免被固定的输入框遮挡 */ /* 微信小程序专属:聊天消息区域增加底部内边距,确保键盘弹出时最后一条消息可见 */
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN */
padding-bottom: 140rpx; padding-bottom: 300rpx;
/* #endif */ /* #endif */
.load-more { .load-more {
@@ -2291,17 +2318,13 @@ $radius-lg: 36rpx;
/* 微信小程序安全区域适配 */ /* 微信小程序安全区域适配 */
padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
/* 确保输入区域正确显示 */ /* 确保输入区域正确显示 */
position: relative;
z-index: 10;
/* 微信小程序专属样式:让输入区域固定在最底部 */
/* #ifdef MP-WEIXIN */
position: fixed; position: fixed;
bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 8rpx 24rpx; bottom: 0;
padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); z-index: 10;
/* #ifdef MP-WEIXIN */
/* 微信小程序中使用绝对定位,方便动态设置bottom */
/* #endif */ /* #endif */
.input-tools { .input-tools {

View File

@@ -110,6 +110,9 @@ export default {
// --- 聊天内容区域 --- // --- 聊天内容区域 ---
scrollViewHeight: '0px', scrollViewHeight: '0px',
// --- 键盘高度 ---
keyboardHeight: 0,
// 事件处理器引用(用于清理) // 事件处理器引用(用于清理)
safeEventHandlers: new Map() safeEventHandlers: new Map()
} }
@@ -178,11 +181,23 @@ export default {
}, },
onShow() { onShow() {
// 可在此补充逻辑(如刷新未读数) // 监听键盘高度变化
uni.onKeyboardHeightChange((res) => {
console.log('键盘高度变化:', res.height);
this.keyboardHeight = res.height;
if (this.$refs.chat && this.$refs.chat.updateKeyboardHeight) {
this.$refs.chat.updateKeyboardHeight(res.height);
}
});
}, },
onHide() { onHide() {
// 页面隐藏时可暂停音频等 // 取消监听键盘高度变化
uni.offKeyboardHeightChange();
this.keyboardHeight = 0;
if (this.$refs.chat && this.$refs.chat.updateKeyboardHeight) {
this.$refs.chat.updateKeyboardHeight(0);
}
}, },
onUnload() { onUnload() {