La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加回到消息底部功能

master
xsx 10 months ago
parent
39b2f716f4
commit
ab9763fd94
2 changed files with 140 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      im-uniapp/pages/chat/chat-box.vue
  2. 146
      im-web/src/components/chat/ChatBox.vue

65
im-uniapp/pages/chat/chat-box.vue
View File

@ -15,6 +15,9 @@
</chat-message-item> </chat-message-item>
</view> </view>
</scroll-view> </scroll-view>
<view v-if="!isInBottom" class="scroll-to-bottom" @click="onClickToBottom">
{{ newMessageSize > 0 ? newMessageSize+'条新消息' :'回到底部'}}
</view>
</view> </view>
<view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()"> <view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()">
<view class="iconfont icon-at">&nbsp;</view> <view class="iconfont icon-at">&nbsp;</view>
@ -140,7 +143,9 @@ export default {
isEmpty: true, // 编辑器是否为空 isEmpty: true, // 编辑器是否为空
isFocus: false, // 编辑器是否焦点 isFocus: false, // 编辑器是否焦点
isReadOnly: false, // 编辑器是否只读 isReadOnly: false, // 编辑器是否只读
playingAudio: null // 当前正在播放的录音消息 playingAudio: null, // 当前正在播放的录音消息
isInBottom: true, // 滚动条是否在底部
newMessageSize: 0 // 滚动条不在底部时新的消息数量
} }
}, },
methods: { methods: {
@ -561,17 +566,32 @@ export default {
} }
}); });
}, },
onClickToBottom() {
this.scrollToBottom();
// 有些设备滚到底部时会莫名触发滚动到顶部的事件
// 所以这里延迟100s保证能准确设置底部标志
setTimeout(() => {
this.isInBottom = true;
this.newMessageSize = 0;
}, 100)
},
onScrollToTop() { onScrollToTop() {
if (this.showMinIdx == 0) { console.log("onScrollToTop")
console.log("消息已滚动到顶部") if (this.showMinIdx > 0) {
return; // #ifndef H5
// 防止滚动条定格在顶部，不能一直往上滚
this.scrollToMsgIdx(this.showMinIdx);
// #endif
// 多展示20条信息
this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
} }
// #ifndef H5 // 清除底部标识
// 防止滚动条定格在顶部，不能一直往上滚 this.isInBottom = false;
this.scrollToMsgIdx(this.showMinIdx); },
// #endif onScrollToBottom(e) {
// 多展示20条信息 // 设置底部标识
this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0; this.isInBottom = true;
this.newMessageSize = 0;
}, },
onShowMore() { onShowMore() {
if (this.chat.type == "GROUP") { if (this.chat.type == "GROUP") {
@ -639,7 +659,6 @@ export default {
method: 'PUT' method: 'PUT'
}).then(() => { }).then(() => {
this.chatStore.resetUnreadCount(this.chat) this.chatStore.resetUnreadCount(this.chat)
this.scrollToBottom();
}) })
}, },
loadGroup(groupId) { loadGroup(groupId) {
@ -907,12 +926,12 @@ export default {
messageSize: function(newSize, oldSize) { messageSize: function(newSize, oldSize) {
// 接收到消息时滚动到底部 // 接收到消息时滚动到底部
if (newSize > oldSize) { if (newSize > oldSize) {
let pages = getCurrentPages(); if (this.isInBottom) {
let curPage = pages[pages.length - 1].route; // 收到消息,则滚动至底部
if (curPage == "pages/chat/chat-box") {
this.scrollToBottom(); this.scrollToBottom();
} else { } else {
this.needScrollToBottom = true; // 若滚动条不在底部，说明用户正在翻历史消息，此时滚动条不能动，同时增加新消息提示
this.newMessageSize++;
} }
} }
}, },
@ -949,7 +968,8 @@ export default {
// 计算聊天窗口高度 // 计算聊天窗口高度
this.$nextTick(() => { this.$nextTick(() => {
this.windowHeight = uni.getSystemInfoSync().windowHeight; this.windowHeight = uni.getSystemInfoSync().windowHeight;
this.reCalChatMainHeight() this.reCalChatMainHeight();
this.scrollToBottom();
// #ifdef H5 // #ifdef H5
this.initHeight = window.innerHeight; this.initHeight = window.innerHeight;
// 兼容ios的h5:禁止页面滚动 // 兼容ios的h5:禁止页面滚动
@ -1025,6 +1045,19 @@ export default {
.scroll-box { .scroll-box {
height: 100%; height: 100%;
} }
.scroll-to-bottom {
position: absolute;
right: 30rpx;
bottom: 30rpx;
font-size: $im-font-size;
color: $im-color-primary;
font-weight: 600;
background: white;
padding: 10rpx 30rpx;
border-radius: 25rpx;
box-shadow: $im-box-shadow-dark;
}
} }
.chat-at-bar { .chat-at-bar {

146
im-web/src/components/chat/ChatBox.vue
View File

@ -22,6 +22,9 @@
</ul> </ul>
</div> </div>
</el-main> </el-main>
<div v-if="!isInBottom" class="scroll-to-bottom" @click="scrollToBottom">
{{ newMessageSize > 0 ? newMessageSize + '条新消息' : '回到底部' }}
</div>
<el-footer height="220px" class="im-chat-footer"> <el-footer height="220px" class="im-chat-footer">
<div class="chat-tool-bar"> <div class="chat-tool-bar">
<div title="表情" class="icon iconfont icon-emoji" ref="emotion" <div title="表情" class="icon iconfont icon-emoji" ref="emotion"
@ -129,8 +132,10 @@ export default {
showHistory: false, // 是否显示历史聊天记录 showHistory: false, // 是否显示历史聊天记录
lockMessage: false, // 是否锁定发送， lockMessage: false, // 是否锁定发送，
showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡置 showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡置
reqQueue: [], reqQueue: [], // 等待发送的请求队列
isSending: false isSending: false, // 是否正在发消息
isInBottom: false, // 滚动条是否在底部
newMessageSize: 0 // 滚动条不在底部时新的消息数量
} }
}, },
methods: { methods: {
@ -276,6 +281,12 @@ export default {
if (scrollTop < 30) { // 在顶部,不滚动的情况 if (scrollTop < 30) { // 在顶部,不滚动的情况
// 多展示20条信息 // 多展示20条信息
this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0; this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
this.isInBottom = false;
}
// 滚到底部
if (scrollTop + scrollElement.clientHeight >= scrollElement.scrollHeight - 30) {
this.isInBottom = true;
this.newMessageSize = 0;
} }
}, },
showEmotionBox() { showEmotionBox() {
@ -729,8 +740,13 @@ export default {
messageSize: { messageSize: {
handler(newSize, oldSize) { handler(newSize, oldSize) {
if (newSize > oldSize) { if (newSize > oldSize) {
// 拉至底部 if (this.isInBottom) {
this.scrollToBottom(); // 拉至底部
this.scrollToBottom();
} else {
// 增加新消息提醒
this.newMessageSize++;
}
} }
} }
} }
@ -767,72 +783,92 @@ export default {
} }
} }
.im-chat-main { .content-box {
padding: 0; position: relative;
background-color: #fff;
.im-chat-main {
padding: 0;
background-color: #fff;
.im-chat-box { .im-chat-box {
>ul { >ul {
padding: 0 20px; padding: 0 20px;
li { li {
list-style-type: none; list-style-type: none;
}
} }
} }
} }
}
.im-chat-footer { .scroll-to-bottom {
display: flex; text-align: right;
flex-direction: column; position: absolute;
padding: 0; right: 20px;
bottom: 230px;
color: var(--im-color-primary);
font-size: var(--im-font-size);
font-weight: 600;
background: #eee;
padding: 5px 15px;
border-radius: 15px;
cursor: pointer;
z-index: 99;
box-shadow: var(--im-box-shadow-light);
}
.chat-tool-bar { .im-chat-footer {
display: flex; display: flex;
position: relative; flex-direction: column;
width: 100%; padding: 0;
height: 36px;
text-align: left; .chat-tool-bar {
box-sizing: border-box; display: flex;
border-top: var(--im-border); position: relative;
padding: 4px 2px 2px 8px; width: 100%;
height: 36px;
text-align: left;
box-sizing: border-box;
border-top: var(--im-border);
padding: 4px 2px 2px 8px;
>div { >div {
font-size: 22px; font-size: 22px;
cursor: pointer; cursor: pointer;
line-height: 30px; line-height: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
margin-right: 8px; margin-right: 8px;
color: #999; color: #999;
transition: 0.3s; transition: 0.3s;
&.chat-tool-active { &.chat-tool-active {
font-weight: 600; font-weight: 600;
color: var(--im-color-primary); color: var(--im-color-primary);
background-color: #ddd; background-color: #ddd;
}
} }
}
>div:hover { >div:hover {
color: #333; color: #333;
}
} }
}
.send-content-area { .send-content-area {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background-color: white !important; background-color: white !important;
.send-btn-area { .send-btn-area {
padding: 10px; padding: 10px;
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
right: 6px; right: 6px;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save