github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-28 14:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

pref: 优化消息列表

Browse Source
This commit is contained in:
Pang 2024-01-13 22:26:48 +08:00
parent cf7f245a49
commit 57e8c9c7cd
2 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -200,10 +200,12 @@
@on-emoji="onEmoji"
@on-show-emoji-user="onShowEmojiUser">
<template #header>
<div v-if="(allMsgs.length === 0 && loadIng) || prevId > 0" class="dialog-item loading">
<div v-if="scrollOffset < 100" class="dialog-wrapper-loading"></div>
<div class="dialog-item head-box">
<div v-if="loadIng > 0 || prevId > 0" class="loading" :class="{filled: allMsgs.length === 0}">
<span v-if="scrollOffset < 100"></span>
</div>
<div v-else-if="allMsgs.length === 0" class="describe filled">{{$L('暂无消息')}}</div>
</div>
<div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
</template>
</VirtualList>
</div>
@ -2131,17 +2133,19 @@ export default {
requestAnimationFrame(_ => this.msgActiveId = id)
},
onToOffset(offset) {
onToOffset(offset, forceFront = false) {
const scroller = this.$refs.scroller;
if (scroller) {
const front = scroller.getOffset() > offset
scroller.stopToBottom();
scroller.scrollToOffset(offset);
if (front) {
scroller.virtual.handleFront()
} else {
scroller.virtual.handleBehind()
}
setTimeout(_ => {
if (front || forceFront) {
scroller.virtual.handleFront()
} else {
scroller.virtual.handleBehind()
}
}, 10)
}
},
@ -2218,11 +2222,7 @@ export default {
const previousSize = typeof previousValue === "object" ? previousValue.size : scroller.getSize(previousValue)
return {size: previousSize + scroller.getSize(currentId)}
})
let offset = scroller.getOffset() + reducer.size
if (this.prevId === 0) {
offset -= 36
}
this.onToOffset(offset)
this.onToOffset(scroller.getOffset() + reducer.size, true)
});
}).catch(() => {})
},

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

@ -1411,6 +1411,37 @@
}
&.head-box {
height: 36px;
align-items: center;
justify-content: center;
.loading {
> span {
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
margin: 0 auto;
position: relative;
background: #e3e3e3;
box-sizing: border-box;
animation: head-box-loading-animation 0.5s linear infinite alternate;
}
}
.describe {
color: $primary-desc-color;
}
.filled {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&.unread-start {
position: relative;
padding-top: 44px;
@ -1436,22 +1467,6 @@
}
}
&.loading {
height: 20px;
box-sizing: content-box;
align-items: center;
justify-content: center;
}
&.nothing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $primary-desc-color;
padding: 0;
}
&.self {
flex-direction: row-reverse;
@ -2116,19 +2131,7 @@ body:not(.window-touch) {
overflow: hidden !important;
}
.dialog-wrapper-loading {
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
margin: 0 auto;
position: relative;
background: #e3e3e3;
box-sizing: border-box;
animation: dialog-loading-animation 0.5s linear infinite alternate;
}
@keyframes dialog-loading-animation {
@keyframes head-box-loading-animation {
0% {
box-shadow: 0 0, 0 0;
color: rgba(#e3e3e3, 0.2);