github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 03:03:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化消息滚动

Browse Source
This commit is contained in:
kuaifan 2022-07-03 00:12:32 +08:00
parent aa7d93e97e
commit 69fb875421
4 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -54,7 +54,7 @@
"vue-resize-observer": "^2.0.16", "vue-resize-observer": "^2.0.16",
"vue-router": "^3.5.3", "vue-router": "^3.5.3",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14",
"vue-virtual-scroll-list-hi": "^2.3.3-4", "vue-virtual-scroll-list-hi": "^2.3.3-7",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"webpack": "^5.69.1", "webpack": "^5.69.1",

14
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -96,7 +96,8 @@
:item-class-add="itemClassAdd" :item-class-add="itemClassAdd"
:extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}" :extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}"
:estimate-size="78" :estimate-size="78"
:keeps="70" :keeps="50"
:disabled="scrollDisabled"
@scroll="onScroll" @scroll="onScroll"
@range="onRange" @range="onRange"
@totop="onPrevPage" @totop="onPrevPage"
@ -392,6 +393,7 @@ export default {
replyListShow: false, replyListShow: false,
replyListId: 0, replyListId: 0,
scrollDisabled: false,
scrollDirection: null, scrollDirection: null,
scrollAction: 0, scrollAction: 0,
scrollTmp: 0, scrollTmp: 0,
@ -595,7 +597,7 @@ export default {
}, },
msgType(type) { msgType(type) {
this.onToBottom() requestAnimationFrame(this.onToBottom)
if (type) { if (type) {
this.$store.dispatch("getDialogMsgs", { this.$store.dispatch("getDialogMsgs", {
dialog_id: this.dialogId, dialog_id: this.dialogId,
@ -1086,7 +1088,10 @@ export default {
dialog_id: this.dialogId, dialog_id: this.dialogId,
msg_id: this.msgId, msg_id: this.msgId,
msg_type: this.msgType, msg_type: this.msgType,
prev_id: this.prevId prev_id: this.prevId,
save_before: _ => {
this.scrollDisabled = true
}
}).then(({data}) => { }).then(({data}) => {
const ids = data.list.map(item => item.id) const ids = data.list.map(item => item.id)
this.$nextTick(() => { this.$nextTick(() => {
@ -1099,7 +1104,8 @@ export default {
if (this.prevId === 0) { if (this.prevId === 0) {
size -= 36 size -= 36
} }
this.onToOffset(size); this.onToOffset(size)
this.scrollDisabled = false
}); });
}).catch(() => {}) }).catch(() => {})
}, },

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

@ -2183,7 +2183,7 @@ export default {
* @param state * @param state
* @param dispatch * @param dispatch
* @param getters * @param getters
* @param data {dialog_id, msg_id, ?msg_type, ?position_id, ?prev_id, ?next_id} * @param data {dialog_id, msg_id, ?msg_type, ?position_id, ?prev_id, ?next_id, ?save_before, ?save_after}
* @returns {Promise<unknown>} * @returns {Promise<unknown>}
*/ */
getDialogMsgs({state, dispatch, getters}, data) { getDialogMsgs({state, dispatch, getters}, data) {
@ -2194,6 +2194,11 @@ export default {
return; return;
} }
// //
const saveBefore = typeof data.save_before === "function" ? data.save_before : _ => {}
const saveAfter = typeof data.save_after === "function" ? data.save_after : _ => {}
if (typeof data.save_before !== "undefined") delete data.save_before
if (typeof data.save_after !== "undefined") delete data.save_after
//
const loadKey = `msg::${data.dialog_id}-${data.msg_id}-${data.msg_type || ''}` const loadKey = `msg::${data.dialog_id}-${data.msg_id}-${data.msg_type || ''}`
if (getters.isLoad(loadKey)) { if (getters.isLoad(loadKey)) {
reject({msg: 'Loading'}); reject({msg: 'Loading'});
@ -2214,7 +2219,9 @@ export default {
state.dialogMsgs = state.dialogMsgs.filter(item => item.dialog_id != data.dialog_id || ids.includes(item.id)); state.dialogMsgs = state.dialogMsgs.filter(item => item.dialog_id != data.dialog_id || ids.includes(item.id));
} }
// //
dispatch("saveDialogMsg", resData.list); saveBefore()
dispatch("saveDialogMsg", resData.list)
saveAfter()
resolve(result) resolve(result)
}).catch(e => { }).catch(e => {
console.warn(e); console.warn(e);

8
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -210,7 +210,7 @@
.nav-tags { .nav-tags {
position: absolute; position: absolute;
top: 74px; top: 78px;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
@ -311,7 +311,7 @@
padding: 16px 32px 0; padding: 16px 32px 0;
&.default-header { &.default-header {
padding-top: 48px; padding-top: 56px;
} }
.dialog-shake { .dialog-shake {
@ -1352,6 +1352,10 @@
user-select: none; user-select: none;
background-color: #ffffff; background-color: #ffffff;
&.default-header {
padding-top: 48px;
}
.dialog-item { .dialog-item {
.dialog-view { .dialog-view {
.dialog-head { .dialog-head {