perf: 优化聊天窗口滚动

This commit is contained in:
kuaifan 2022-03-31 21:48:23 +08:00
parent 3796a3dbde
commit 3c8642f30f
2 changed files with 50 additions and 38 deletions

View File

@ -28,6 +28,7 @@
<ScrollerY <ScrollerY
ref="scroller" ref="scroller"
class="dialog-scroller overlay-y" class="dialog-scroller overlay-y"
:style="{opacity: visible ? 1 : 0}"
:auto-bottom="isAutoBottom" :auto-bottom="isAutoBottom"
@on-scroll="chatScroll" @on-scroll="chatScroll"
static> static>
@ -129,6 +130,7 @@ export default {
data() { data() {
return { return {
visible: true,
autoBottom: true, autoBottom: true,
autoInterval: null, autoInterval: null,
@ -243,10 +245,13 @@ export default {
dialogId: { dialogId: {
handler(id) { handler(id) {
if (id) { if (id) {
this.autoBottom = true;
this.msgNew = 0; this.msgNew = 0;
this.topId = -1; this.topId = -1;
this.$store.dispatch("getDialogMsgs", id); this.visible = false;
this.$store.dispatch("getDialogMsgs", id).then(_ => {
this.onToBottom();
this.visible = true;
});
} }
}, },
immediate: true immediate: true

View File

@ -2025,9 +2025,12 @@ export default {
* @param state * @param state
* @param dispatch * @param dispatch
* @param dialog_id * @param dialog_id
* @returns {Promise<unknown>}
*/ */
getDialogMsgs({state, dispatch}, dialog_id) { getDialogMsgs({state, dispatch}, dialog_id) {
return new Promise(resolve => {
if (!dialog_id) { if (!dialog_id) {
resolve()
return; return;
} }
let dialog = state.cacheDialogs.find(({id}) => id == dialog_id); let dialog = state.cacheDialogs.find(({id}) => id == dialog_id);
@ -2038,6 +2041,7 @@ export default {
state.cacheDialogs.push(dialog); state.cacheDialogs.push(dialog);
} }
if (dialog.loading) { if (dialog.loading) {
resolve()
return; return;
} }
dialog.loading = true; dialog.loading = true;
@ -2061,9 +2065,12 @@ export default {
// //
dispatch("saveDialog", result.data.dialog); dispatch("saveDialog", result.data.dialog);
dispatch("saveDialogMsg", result.data.data); dispatch("saveDialogMsg", result.data.data);
resolve()
}).catch(e => { }).catch(e => {
console.warn(e); console.warn(e);
dialog.loading = false; dialog.loading = false;
resolve()
});
}); });
}, },