数据没有全部加载完毕就展示了底线视图

Question

<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{
			use: false
		}" @up="upCallback" :up="{
			textNoMore: '-- 我也是有底线的！！ --'
		}">

async mescrollInit() {
				await this.loadArticleCommentList()
				this.isInit = false;
				this.getMescroll().endSuccess();
				console.log(`当获取到的评论数量：${this.commentList.length}, 全部的评论数量：${this.commentListTotal}`)
				this.getMescroll().endBySize(this.commentList.length, this.commentListTotal);
			},
			async upCallback() {
				if (this.isInit) return;
				this.page += 1;
				await this.loadArticleCommentList();
				this.getMescroll().endSuccess();
				console.log(`当获取到的评论数量：${this.commentList.length}, 全部的评论数量：${this.commentListTotal}`)
				this.getMescroll().endBySize(this.commentList.length, this.commentListTotal);
			},
			getMescroll() {
				if (this.$refs.mescrollRef) {
					this.mescroll = this.$refs.mescrollRef.mescroll
				}
				return this.mescroll;
			},
			async loadArticleCommentList() {
				const {
					data: res
				} = await getArticleCommentList({
					articleId: this.articleId,
					page: this.page,
					size: this.size
				})
				this.commentListTotal = res.count;
				if (this.page === 1) {
					this.commentList = res.list
				} else {
					this.commentList = [...this.commentList, ...res.list]
				}
			},

Answer 1

Sunday 2022-11-11 14:07:37

你好

这个问题可以查看下该问答：https://coding.imooc.com/learn/questiondetail/2JZ90XeeLA7XarpL.html 

该问题出现的原因可以查看该问答：

https://coding.imooc.com/learn/questiondetail/x5yVlYm4V92P4g0R.html 

• 提问者 雪豹闭嘴 #1

  老师，设置了:up="{page:{size:每页条数}}"后，只是解决了·每页五条直接展示底部提示·的问题，并没有解决·数量对比不一致仍展示底部·的问题，但是我把 【endBySize】方法删掉，使用【endSuccess(当前评论总数量，是否还有下一页)】的方法解决了·数量对比不一致仍展示底部·的问题。
  这是代码：
  this.getMescroll().endSuccess(this.commentList.length, this.commentList.length < this.commentListTotal);
  代码截图我贴在上面了

• 提问者 雪豹闭嘴 #2

  非常感谢！

Answer 2

提问者 雪豹闭嘴 2022-11-11 14:27:19

解决了

this.getMescroll().endSuccess(this.commentList.length, this.commentList.length < this.commentListTotal);

• 潜行的夜猫子 #1

  确实有效！感谢