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