chore:输入框不被遮挡了
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user