mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
perf: 优化新消息等列表滚动
This commit is contained in:
kuaifan
parent
8e9ba7a2d2
commit
b9feeabfb3
@ -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
22
resources/assets/js/functions/common.js
vendored
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
5
resources/assets/js/store/actions.js
vendored
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user