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

View File

@@ -110,6 +110,9 @@ export default {
// --- 聊天内容区域 ---
scrollViewHeight: '0px',
// --- 键盘高度 ---
keyboardHeight: 0,
// 事件处理器引用(用于清理)
safeEventHandlers: new Map()
}
@@ -178,11 +181,23 @@ export default {
},
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() {
// 页面隐藏时可暂停音频等
// 取消监听键盘高度变化
uni.offKeyboardHeightChange();
this.keyboardHeight = 0;
if (this.$refs.chat && this.$refs.chat.updateKeyboardHeight) {
this.$refs.chat.updateKeyboardHeight(0);
}
},
onUnload() {