From 24ea5fd2d3b42ca111af81e3afbb7a8b8328708e Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Thu, 21 Aug 2025 10:53:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8Dios=E5=B0=8F=E7=A8=8B?=
=?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-uniapp/App.vue | 22 +-
.../chat-message-item/chat-message-item.vue | 18 +-
im-uniapp/components/nav-bar/nav-bar.vue | 203 +++++++--------
im-uniapp/pages.json | 10 +-
im-uniapp/pages/chat/chat-box.vue | 238 +++++++++---------
5 files changed, 266 insertions(+), 225 deletions(-)
diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index a2eea21..de5c4bc 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -492,6 +492,9 @@ uni-page-head {
}
// #endif
+page {
+ background-color: $im-bg;
+}
.tab-page {
position: relative;
@@ -502,9 +505,15 @@ uni-page-head {
top: $im-nav-bar-height;
// #endif
- // #ifndef H5
+ // #ifdef APP-PLUS
height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
top: calc($im-nav-bar-height + var(--status-bar-height));
+ // #endif
+
+ // #ifdef MP-WEIXIN
+ height: calc(100vh - $im-nav-bar-height);
+ top: $im-nav-bar-height;
+
// #endif
color: $im-text-color;
background-color: $im-bg;
@@ -515,13 +524,20 @@ uni-page-head {
.page {
position: relative;
// #ifdef H5
- height: calc(100vh - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+ height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
top: $im-nav-bar-height;
// #endif
- // #ifndef H5
+
+ // #ifdef APP-PLUS
height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
top: calc($im-nav-bar-height + var(--status-bar-height));
// #endif
+
+ // #ifdef MP-WEIXIN
+ height: calc(100vh - $im-nav-bar-height);
+ top: $im-nav-bar-height;
+ // #endif
+
color: $im-text-color;
background-color: $im-bg;
font-size: $im-font-size;
diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue
index f95e34a..5b1a43d 100644
--- a/im-uniapp/components/chat-message-item/chat-message-item.vue
+++ b/im-uniapp/components/chat-message-item/chat-message-item.vue
@@ -56,21 +56,21 @@
+
+
+
+
+ {{ msgInfo.content }}
+
+
-
-
-
-
- {{ msgInfo.content }}
-
-
已读
未读
diff --git a/im-uniapp/components/nav-bar/nav-bar.vue b/im-uniapp/components/nav-bar/nav-bar.vue
index b2fb631..71963ce 100644
--- a/im-uniapp/components/nav-bar/nav-bar.vue
+++ b/im-uniapp/components/nav-bar/nav-bar.vue
@@ -1,119 +1,122 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json
index 68c9b75..e4df795 100644
--- a/im-uniapp/pages.json
+++ b/im-uniapp/pages.json
@@ -30,7 +30,9 @@
{
"path": "pages/chat/chat-box",
"style": {
- "navigationStyle": "custom",
+ "mp-weixin": {
+ "disableScroll": true
+ },
"app-plus": {
// adjustPan窗体高度不变，但窗体上推、adjustResize屏幕高度=webview窗体高度+软键盘高度
"softinputMode": "adjustResize"
@@ -67,7 +69,13 @@
],
"globalStyle": {
"navigationBarTitleText": "盒子IM",
+ "navigationBarTextStyle": "black",
+ /* #ifndef MP-WEIXIN */
"navigationStyle": "custom",
+ /* #endif */
+ /* #ifdef MP-WEIXIN */
+ "navigationStyle": "default",
+ /* #endif */
"navigationBarBackgroundColor": "#f7f7f7",
"backgroundColor": "#f7f7f7"
},
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index 52fa4a2..9613af5 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -50,52 +50,55 @@
-
-
-
-
-
- 文件
-
-
-
-
-
- 相册
-
-
-
-
-
- 拍摄
-
-
-
- 语音消息
-
-
-
- 回执消息
-
-
-
-
-
- 视频通话
-
-
-
- 语音通话
-
-
-
- 语音通话
+
+
+
+
+
+
+ 文件
+
+
+
+
+
+ 相册
+
+
+
+
+
+ 拍摄
+
+
+
+ 语音消息
+
+
+
+ 回执消息
+
+
+
+
+
+ 视频通话
+
+
+
+ 语音通话
+
+
+
+ 语音通话
+
+
-
-
+
@@ -133,6 +136,7 @@ export default {
showRecord: false,
chatMainHeight: 800, // 聊天窗口高度
keyboardHeight: 290, // 键盘高度
+ screenHeight: 1000, // 屏幕高度
windowHeight: 1000, // 窗口高度
initHeight: 1000, // h5初始高度
atUserIds: [],
@@ -393,10 +397,12 @@ export default {
this.switchChatTabBox('tools')
},
switchChatTabBox(chatTabBox) {
- this.chatTabBox = chatTabBox;
- this.reCalChatMainHeight();
- if (chatTabBox != 'tools' && this.$refs.fileUpload) {
- this.$refs.fileUpload.hide()
+ if (this.chatTabBox != chatTabBox) {
+ this.chatTabBox = chatTabBox;
+ if (chatTabBox != 'tools' && this.$refs.fileUpload) {
+ this.$refs.fileUpload.hide()
+ }
+ setTimeout(() => this.reCalChatMainHeight(), 30);
}
},
selectEmoji(emoText) {
@@ -815,39 +821,42 @@ export default {
}
},
reCalChatMainHeight() {
- setTimeout(() => {
- let h = this.windowHeight;
- // 减去标题栏高度
- h -= 50;
- // 减去键盘高度
- if (this.isShowKeyBoard || this.chatTabBox != 'none') {
- h -= this.keyboardHeight;
- this.scrollToBottom();
- }
- // #ifndef H5
- // h5需要减去状态栏高度
- h -= uni.getSystemInfoSync().statusBarHeight;
- // #endif
- this.chatMainHeight = h;
- if (this.isShowKeyBoard || this.chatTabBox != 'none') {
- this.scrollToBottom();
- }
- // ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下
- // #ifdef H5
- if (uni.getSystemInfoSync().platform == 'ios') {
- // 不同手机需要的延时时间不一致，采用分段延时的方式处理
- const delays = [50, 100, 500];
- delays.forEach((delay) => {
- setTimeout(() => {
- uni.pageScrollTo({
- scrollTop: 0,
- duration: 10
- });
- }, delay);
- })
+ let sysInfo = uni.getSystemInfoSync();
+ let h = this.windowHeight;
+ // 减去标题栏高度
+ h -= 50;
+ // 减去键盘高度
+ if (this.isShowKeyBoard || this.chatTabBox != 'none') {
+ // ios app的键盘高度不准，需要减去屏幕和窗口差
+ // #ifdef APP-PLUS
+ if (sysInfo.platform == 'ios') {
+ h += this.screenHeight - this.windowHeight;
}
// #endif
- }, 30)
+ h -= this.keyboardHeight;
+ this.scrollToBottom();
+ }
+
+ // APP需要减去状态栏高度
+ // #ifdef APP-PLUS
+ h -= sysInfo.statusBarHeight;
+ // #endif
+ this.chatMainHeight = h;
+ // #ifndef APP
+ // ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下
+ if (uni.getSystemInfoSync().platform == 'ios') {
+ // 不同手机需要的延时时间不一致，采用分段延时的方式处理
+ const delays = [50, 100, 500];
+ delays.forEach((delay) => {
+ setTimeout(() => {
+ uni.pageScrollTo({
+ scrollTop: 0,
+ duration: 10
+ });
+ }, delay);
+ })
+ }
+ // #endif
},
listenKeyBoard() {
// #ifdef H5
@@ -889,7 +898,7 @@ export default {
if (this.isShowKeyBoard) {
this.keyboardHeight = res.height; // 获取并保存键盘高度
}
- this.reCalChatMainHeight();
+ setTimeout(() => this.reCalChatMainHeight(), 30);
},
resizeListener() {
let keyboardHeight = this.initHeight - window.innerHeight;
@@ -902,15 +911,15 @@ export default {
if (this.isShowKeyBoard) {
this.keyboardHeight = keyboardHeight;
}
- this.reCalChatMainHeight();
+ setTimeout(() => this.reCalChatMainHeight(), 30);
},
focusInListener() {
this.isShowKeyBoard = true;
- this.reCalChatMainHeight();
+ setTimeout(() => this.reCalChatMainHeight(), 30);
},
focusOutListener() {
this.isShowKeyBoard = false;
- this.reCalChatMainHeight();
+ setTimeout(() => this.reCalChatMainHeight(), 30);
},
showBannedTip() {
let msgInfo = {
@@ -1082,7 +1091,11 @@ export default {
// 监听键盘高度
this.listenKeyBoard();
// 计算聊天窗口高度
+ this.windowHeight = uni.getSystemInfoSync().windowHeight;
+ this.screenHeight = uni.getSystemInfoSync().screenHeight;
+ this.reCalChatMainHeight();
this.$nextTick(() => {
+ // 上面获取的windowHeight可能不准，重新计算一次聊天窗口高度
this.windowHeight = uni.getSystemInfoSync().windowHeight;
this.reCalChatMainHeight();
this.scrollToBottom();
@@ -1132,10 +1145,10 @@ export default {
}
.chat-main-box {
- // #ifdef H5
+ // #ifndef APP-PLUS
top: $im-nav-bar-height;
// #endif
- // #ifndef H5
+ // #ifdef APP-PLUS
top: calc($im-nav-bar-height + var(--status-bar-height));
// #endif
position: fixed;
@@ -1206,7 +1219,7 @@ export default {
border-top: $im-border solid 1px;
background-color: $im-bg;
min-height: 80rpx;
- margin-bottom: 14rpx;
+ padding-bottom: 14rpx;
.iconfont {
font-size: 60rpx;
@@ -1250,44 +1263,45 @@ export default {
background-color: $im-bg;
.chat-tools {
- display: flex;
- flex-wrap: wrap;
- align-items: top;
- height: 310px;
padding: 40rpx;
box-sizing: border-box;
- .chat-tools-item {
- width: 25%;
- padding: 16rpx;
- box-sizing: border-box;
+ .chat-tools-list {
display: flex;
- flex-direction: column;
- align-items: center;
+ flex-wrap: wrap;
+ align-content: center;
- .tool-icon {
- padding: 26rpx;
- font-size: 54rpx;
- border-radius: 20%;
- background-color: white;
- color: $icon-color;
+ .chat-tools-item {
+ width: 25%;
+ padding: 16rpx;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .tool-icon {
+ padding: 26rpx;
+ font-size: 54rpx;
+ border-radius: 20%;
+ background-color: white;
+ color: $icon-color;
- &:active {
- background-color: $im-bg-active;
+ &:active {
+ background-color: $im-bg-active;
+ }
}
- }
- .tool-name {
- height: 60rpx;
- line-height: 60rpx;
- font-size: 28rpx;
+ .tool-name {
+ height: 60rpx;
+ line-height: 60rpx;
+ font-size: 28rpx;
+ }
}
}
}
.chat-emotion {
- height: 310px;
- padding: 20rpx;
+ padding: 40rpx;
box-sizing: border-box;
.emotion-item-list {