github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-17 06:32:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化聊天窗口滚动

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/assets/js/pages/manage/components/DialogWrapper.vue
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

79
resources/assets/js/store/actions.js vendored
View File

@ -2025,45 +2025,52 @@ 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) {
if (!dialog_id) { return new Promise(resolve => {
return; if (!dialog_id) {
} resolve()
let dialog = state.cacheDialogs.find(({id}) => id == dialog_id); return;
if (!dialog) { }
dialog = { let dialog = state.cacheDialogs.find(({id}) => id == dialog_id);
id: dialog_id, if (!dialog) {
}; dialog = {
state.cacheDialogs.push(dialog); id: dialog_id,
} };
if (dialog.loading) { state.cacheDialogs.push(dialog);
return; }
} if (dialog.loading) {
dialog.loading = true; resolve()
dialog.currentPage = 1; return;
dialog.hasMorePages = false; }
// dialog.loading = true;
dispatch("call", { dialog.currentPage = 1;
url: 'dialog/msg/lists', dialog.hasMorePages = false;
data: {
dialog_id: dialog_id,
page: dialog.currentPage
},
}).then(result => {
dialog.loading = false;
dialog.currentPage = result.data.current_page;
dialog.hasMorePages = !!result.data.next_page_url;
dispatch("saveDialog", dialog);
// //
const ids = result.data.data.map(({id}) => id) dispatch("call", {
state.dialogMsgs = state.dialogMsgs.filter((item) => item.dialog_id != dialog_id || ids.includes(item.id)); url: 'dialog/msg/lists',
// data: {
dispatch("saveDialog", result.data.dialog); dialog_id: dialog_id,
dispatch("saveDialogMsg", result.data.data); page: dialog.currentPage
}).catch(e => { },
console.warn(e); }).then(result => {
dialog.loading = false; dialog.loading = false;
dialog.currentPage = result.data.current_page;
dialog.hasMorePages = !!result.data.next_page_url;
dispatch("saveDialog", dialog);
//
const ids = result.data.data.map(({id}) => id)
state.dialogMsgs = state.dialogMsgs.filter((item) => item.dialog_id != dialog_id || ids.includes(item.id));
//
dispatch("saveDialog", result.data.dialog);
dispatch("saveDialogMsg", result.data.data);
resolve()
}).catch(e => {
console.warn(e);
dialog.loading = false;
resolve()
});
}); });
}, },