|
...
|
...
|
@@ -6,7 +6,8 @@ |
|
|
|
<Loading></Loading>
|
|
|
|
</div>
|
|
|
|
<Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp">
|
|
|
|
<div ref="commentList" class="comment-list">
|
|
|
|
<CommentEmpty v-if="empty"></CommentEmpty>
|
|
|
|
<div v-else ref="commentList" class="comment-list">
|
|
|
|
<div ref="commentListTop" class="comment-list-top">
|
|
|
|
<div ref="commentPre" class="comment-pre-list">
|
|
|
|
<div
|
|
...
|
...
|
@@ -85,6 +86,7 @@ export default { |
|
|
|
commentList: [],
|
|
|
|
commentPreList: [],
|
|
|
|
firstLoading: true,
|
|
|
|
empty: false,
|
|
|
|
scrollOption: {
|
|
|
|
bounce: false,
|
|
|
|
pullUpLoad: {
|
|
...
|
...
|
@@ -149,43 +151,46 @@ export default { |
|
|
|
},
|
|
|
|
async fetchComments(pre) {
|
|
|
|
const result = await this.fetchCommentsAsync(pre);
|
|
|
|
let dirty = true;
|
|
|
|
let dirty = false;
|
|
|
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
const comments = get(result, 'data.commentInfos', []);
|
|
|
|
|
|
|
|
if (comments.length) {
|
|
|
|
this.$emit('on-page-change', {
|
|
|
|
page: result.data.page,
|
|
|
|
size: result.data.total
|
|
|
|
});
|
|
|
|
|
|
|
|
if (pre) {
|
|
|
|
this.commentPreList.unshift(comments);
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.loadPreComment();
|
|
|
|
if (!get(result, 'data.total')) {
|
|
|
|
this.empty = true;
|
|
|
|
} else {
|
|
|
|
if (comments.length) {
|
|
|
|
this.$emit('on-page-change', {
|
|
|
|
page: result.data.page,
|
|
|
|
size: result.data.total
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
if (this.page <= 2) {
|
|
|
|
this.commentList = comments;
|
|
|
|
|
|
|
|
// 将评论滚动到可视区域
|
|
|
|
if (this.commentId) {
|
|
|
|
setTimeout(() => {
|
|
|
|
let scrollHeight = this.$refs.scroll.$el.offsetHeight;
|
|
|
|
let dom = this.$refs.commentList.getElementsByClassName('comment-' + this.commentId);
|
|
|
|
|
|
|
|
if (scrollHeight && dom.length && (dom[0].offsetHeight + dom[0].offsetTop > scrollHeight)) {
|
|
|
|
this.$refs.scroll.scrollTo(0, scrollHeight - this.$refs.commentList.offsetHeight);
|
|
|
|
}
|
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (pre) {
|
|
|
|
this.commentPreList.unshift(comments);
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.loadPreComment();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.commentList = this.commentList.concat(comments);
|
|
|
|
if (this.page <= 2) {
|
|
|
|
this.commentList = comments;
|
|
|
|
|
|
|
|
// 将评论滚动到可视区域
|
|
|
|
if (this.commentId) {
|
|
|
|
setTimeout(() => {
|
|
|
|
let scrollHeight = this.$refs.scroll.$el.offsetHeight;
|
|
|
|
let dom = this.$refs.commentList.getElementsByClassName('comment-' + this.commentId);
|
|
|
|
|
|
|
|
if (scrollHeight && dom.length && (dom[0].offsetHeight + dom[0].offsetTop > scrollHeight)) {
|
|
|
|
this.$refs.scroll.scrollTo(0, scrollHeight - this.$refs.commentList.offsetHeight);
|
|
|
|
}
|
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.commentList = this.commentList.concat(comments);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
dirty = true;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
dirty = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.firstLoading = false;
|
...
|
...
|
|
