github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化新消息等列表滚动

Browse Source
This commit is contained in:
kuaifan 2022-03-07 00:35:00 +08:00
parent 8e9ba7a2d2
commit b9feeabfb3
6 changed files with 53 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/assets/js/components/ScrollerY.vue
View File

@ -123,15 +123,11 @@ export default {
},
autoToBottom() {
if (this.autoBottom && this.$refs.bottom) {
try {
this.$refs.bottom.scrollIntoView(false);
} catch (e) {
scrollIntoView(this.$refs.bottom, {
behavior: 'instant',
inline: 'end',
})
}
if (this.autoBottom) {
$A.scrollToView(this.$refs.bottom, {
behavior: 'instant',
inline: 'end',
})
}
},

22
resources/assets/js/functions/common.js vendored
View File

@ -967,6 +967,28 @@
let domain = (weburl + "").match(urlReg);
return ((domain != null && domain.length > 0) ? domain[2] : "");
},
/**
* 滚动到View
* @param element
* @param options
*/
scrollToView(element, options) {
if (!element) {
return;
}
if (typeof options.scrollMode !== "undefined" && typeof window.scrollIntoView === "function") {
window.scrollIntoView(element, options)
return;
}
try {
element.scrollIntoView(options);
} catch (e) {
if (typeof window.scrollIntoView === "function") {
window.scrollIntoView(element, options)
}
}
}
});
/**

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

@ -60,7 +60,7 @@
</div>
</ScrollerY>
<div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
<div class="dialog-newmsg" @click="autoToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
<div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
<slot name="inputBefore"/>
<DragInput
ref="input"
@ -273,7 +273,7 @@ export default {
if (!this.isDesktop) {
this.$refs.input.blur();
}
this.autoToBottom();
this.onToBottom();
this.onActive();
//
this.$store.dispatch("call", {
@ -374,7 +374,7 @@ export default {
if (!this.isDesktop) {
this.$refs.input.blur();
}
this.autoToBottom();
this.onToBottom();
this.onActive();
break;
@ -414,7 +414,7 @@ export default {
this.autoBottom = false;
break;
}
if (res.scale === 1) {
if (res.scale >= 1) {
this.msgNew = 0;
this.autoBottom = true;
}
@ -434,7 +434,8 @@ export default {
this.$emit("on-active");
},
autoToBottom() {
onToBottom() {
this.autoBottom = true;
this.$refs.scroller && this.$refs.scroller.autoToBottom();
},
@ -457,24 +458,17 @@ export default {
this.$store.dispatch('getDialogMoreMsgs', this.dialogId).then(() => {
this.$nextTick(() => {
this.topId = topId;
let dom = document.getElementById("view_" + topId);
if (dom) {
try {
dom.scrollIntoView(true);
} catch (e) {
scrollIntoView(dom, {
behavior: 'instant',
inline: 'start',
})
}
}
$A.scrollToView(document.getElementById("view_" + topId), {
behavior: 'instant',
inline: 'start',
})
});
}).catch(() => {})
},
addDialogMsg() {
if (this.isAutoBottom) {
this.$nextTick(this.autoToBottom);
this.$nextTick(this.onToBottom);
} else {
this.$nextTick(() => {
if (this.$refs.scroller && this.$refs.scroller.scrollInfo().scrollE > 10) {

15
resources/assets/js/pages/manage/dashboard.vue
View File

@ -156,17 +156,10 @@ export default {
},
scrollTo(type) {
try {
this.$refs[`type_${type}`][0].scrollIntoView({
behavior: 'instant',
inline: 'end',
});
} catch (e) {
scrollIntoView(this.$refs[`type_${type}`][0], {
behavior: 'instant',
inline: 'end',
})
}
$A.scrollToView(this.$refs[`type_${type}`][0], {
behavior: 'smooth',
inline: 'end',
});
},
openTask(task) {

16
resources/assets/js/pages/manage/messenger.vue
View File

@ -277,14 +277,10 @@ export default {
// 再次点击滚动到未读条目
const dialog = this.dialogList.find(({unread}) => unread > 0)
if (dialog) {
try {
this.$refs[`dialog_${dialog.id}`][0].scrollIntoView();
} catch (e) {
scrollIntoView(this.$refs[`dialog_${dialog.id}`][0], {
behavior: 'instant',
inline: 'end',
})
}
$A.scrollToView(this.$refs[`dialog_${dialog.id}`][0], {
behavior: 'instant',
inline: 'end',
})
}
}
this.dialogActive = type
@ -426,7 +422,7 @@ export default {
if (this.$refs.list) {
let active = this.$refs.list.querySelector(".active")
if (active) {
scrollIntoView(active, {
$A.scrollToView(active, {
behavior: smooth === true ? 'smooth' : 'instant',
scrollMode: 'if-needed',
});
@ -437,7 +433,7 @@ export default {
this.$nextTick(() => {
let active = this.$refs.list.querySelector(".active")
if (active) {
scrollIntoView(active, {
$A.scrollToView(active, {
behavior: smooth === true ? 'smooth' : 'instant',
scrollMode: 'if-needed',
});

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

@ -2056,6 +2056,7 @@ export default {
let dialog = state.cacheDialogs.find(({id}) => id == data.dialog_id);
if (dialog && dialog.unread > 0) {
dialog.unread--
dispatch("saveDialog", dialog)
}
//
state.wsReadWaitList.push(data.id);
@ -2170,7 +2171,10 @@ export default {
dialog_id: data.dialog_id
}).then(result => {
dialog.unread = result.data.unread
dispatch("saveDialog", dialog)
}).catch(() => {});
} else {
dispatch("saveDialog", dialog)
}
}
break;
@ -2188,6 +2192,7 @@ export default {
// 新增未读数
state.cacheUnreads[data.id] = true;
dialog.unread++;
dispatch("saveDialog", dialog)
}
Store.set('dialogMsgPush', data);
}