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

消息列表滚动到底部

Browse Source
This commit is contained in:
kuaifan 2022-06-17 16:04:30 +08:00
parent 88316fda1c
commit 500e666416
2 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,8 +96,9 @@
</VirtualList>
<!--底部输入-->
<div class="dialog-footer" :class="{newmsg: msgNew > 0 && allMsgs.length > 0}" @click="onActive">
<div class="dialog-footer" :class="footerClass" @click="onActive">
<div class="dialog-newmsg" @click="onToBottom">{{$L(`有${msgNew}条新消息`)}}</div>
<div class="dialog-goto" @click="onToBottom"><i class="taskfont">&#xe72b;</i></div>
<DialogUpload
ref="chatUpload"
class="chat-upload"
@ -326,6 +327,8 @@ export default {
recordState: '',
wrapperStart: 0,
scrollBalance: 0,
scrollMoreLoad: false,
replyId: 0,
@ -428,6 +431,17 @@ export default {
return [];
},
footerClass() {
const array = [];
if (this.msgNew > 0 && this.allMsgs.length > 0) {
array.push('newmsg')
}
if (this.scrollBalance > 50) {
array.push('goto')
}
return array
},
msgUnreadOnly() {
let num = 0;
this.cacheDialogs.some(dialog => {
@ -910,29 +924,28 @@ export default {
this.__onScroll && clearTimeout(this.__onScroll);
this.__onScroll = setTimeout(_ => {
const {balance} = this.scrollInfo();
if (balance <= 10) {
this.scrollBalance = balance;
if (this.scrollBalance <= 10) {
this.msgNew = 0;
}
}, 100)
//
if (!this.scrollMoreLoad) {
let tmpPage = 0;
for (let i = range.start; i <= range.end; i++) {
if (tmpPage - parseInt(this.allMsgs[i]._page) > 1) {
this.scrollMoreLoad = true
setTimeout(_ => {
//
if (!this.scrollMoreLoad) {
let tmpPage = 0;
for (let i = range.start; i <= range.end; i++) {
if (tmpPage - parseInt(this.allMsgs[i]._page) > 1) {
this.scrollMoreLoad = true
this.$store.dispatch("getDialogMoreMsgs", {
dialog_id: this.dialogId,
page: tmpPage - 1
}).finally(_ => {
this.scrollMoreLoad = false
})
}, 100)
break;
break;
}
tmpPage = parseInt(this.allMsgs[i]._page);
}
tmpPage = parseInt(this.allMsgs[i]._page);
}
}
}, 100)
},
onBack() {

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

@ -188,7 +188,7 @@
padding: 16px 32px 0;
.dialog-shake {
animation: ani-dialog-shake 500ms ease-in-out;
animation: ani-dialog-shake 600ms ease-in-out;
animation-delay: 200ms;
}
@ -799,21 +799,47 @@
margin-bottom: 16px;
.dialog-newmsg {
display: none;
display: block;
position: absolute;
top: -38px;
right: 24px;
top: -44px;
left: 50%;
height: 30px;
line-height: 30px;
color: #ffffff;
font-size: 12px;
background-color: #555555;
padding: 0 12px;
margin-bottom: 20px;
margin-right: 10px;
border-radius: 16px;
cursor: pointer;
z-index: 2;
transition: all 0.3s;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 120%);
}
.dialog-goto {
display: flex;
align-content: center;
justify-content: center;
position: absolute;
top: -48px;
right: 8px;
width: 40px;
height: 40px;
line-height: 40px;
color: #ffffff;
background-color: #555555;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: all 0.3s;
pointer-events: none;
opacity: 0;
transform: translate(120%, 0);
.taskfont {
font-size: 24px;
}
}
.chat-upload {
@ -844,7 +870,17 @@
&.newmsg {
.dialog-newmsg {
display: block;
pointer-events: auto;
opacity: 1;
transform: translate(-50%, 0);
}
}
&.goto {
.dialog-goto {
pointer-events: auto;
opacity: 1;
transform: translate(0, 0);
}
}
}