聊天列表自动滚动

This commit is contained in:
cxc
2022-06-10 17:55:03 +08:00
parent 9cfd6df649
commit 569dc0c1ac
2 changed files with 32 additions and 4 deletions

View File

@ -68,6 +68,7 @@ router.beforeEach(async (to) => {
store.commit("setMessagesList", []);
}
store.commit("setJoinUser", {
meetingId: to.params.meetingId,
nickname: to.params.nickname,
username: to.params.username,
email: to.params.createEmail,

View File

@ -429,9 +429,11 @@ const isVerticalFullScreen = ref(false);
const setFullScreen = async () => {
try {
// alert(document.querySelector(".fullscreen-wrap").requestFullscreen());
document.querySelector(".fullscreen-wrap").requestFullscreen();
} catch (error) {
console.log(error);
// alert(document.querySelector(".fullscreen-wrap").requestFullscreen());
document.querySelector(".fullscreen-wrap").webkitRequestFullscreen();
}
@ -565,6 +567,11 @@ const initWebSocket = () => {
id: uniqueId(),
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});
nextTick(() => {
document
.querySelector(".message-list .message-row:last-child")
.scrollIntoView({ behavior: "smooth" });
});
store.commit("setMessagesList", messages.value);
}
// 开始签到时
@ -633,6 +640,11 @@ const sendMessage = (msgObj) => {
)
);
messages.value.push(msgObj);
nextTick(() => {
document
.querySelector(".message-list .message-row:last-child")
.scrollIntoView({ behavior: "smooth" });
});
store.commit("setMessagesList", messages.value);
};
@ -759,6 +771,12 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
:deep(.rich-editor) {
width: 14vw !important;
}
:deep(.notInSharing
div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div) {
width: $meetingComponentWitdh;
}
#meeting-container {
box-sizing: border-box;
padding-top: calc(80vw * 0.08);
@ -782,6 +800,9 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
> div) {
padding-top: 3px;
}
:deep(.zmwebsdk-MuiListSubheader-root.zmwebsdk-MuiListSubheader-sticky.zmwebsdk-MuiListSubheader-gutters) {
position: initial;
}
}
.el-button {
position: absolute;
@ -902,6 +923,12 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
#app-container {
#meeting-chat-row {
:deep(.notInSharing
div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div) {
width: $meetingComponentWitdh;
}
#meeting-container {
padding-top: calc(100vw * 0.08);
width: 100vw;
@ -960,9 +987,9 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
#meeting-container.fullscreen {
$meetingComponentWitdh: 96vw;
padding-top: calc(100vw * 0.08);
@media screen and (max-width: 900px) {
padding-top: calc(80vw * 0.08);
}
// @media screen and (max-width: 900px) {
// padding-top: calc(80vw * 0.08);
// }
width: 100vw;
height: 100vh;
.text-label-container {
@ -1036,7 +1063,7 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
#meeting-container.verticalFullScreen {
$meetingComponentWitdh: 96vh;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(80vh * 0.08);
padding-top: calc(100vh * 0.08);
position: absolute;
transform-origin: 0% 0%;
transform: rotate(90deg);