为什么只能加载5条评论?
来源:8-15 评论列表 - 完成全部评论的分页加载
晓之蛇
2023-10-29
老师您好:
【完成全部评论的分页加载】这一节,我点击【查看更多评论】,只能加载5条评论。

而老师视频中持续触发上拉加载操作时,可以5条评论5条评论不断累加向下展示,即当前文章评论有164条,多次上拉加载后应该会展示164条评论才对。

目前还没有到下一章节视频处理到底部提示,请看下当前问题如何处理,谢谢!
代码article-comment-list.vue:
<template>
<block>
<!-- 精简评论 -->
<view class="comment-limit-container" v-if="!isShowAllComment">
<!-- 标题 -->
<view class="comment-title">精简评论</view>
<!-- 评论内容 -->
<view class="comment-list">
<block v-for="(item, index) in commentList.slice(0, 2)" :key="index">
<ArticleCommentItem :info="item.info" />
</block>
</view>
<!-- 底部 -->
<view class="show-more" @click="onMoreClick">查看更多评论</view>
</view>
<!-- 全部评论 -->
<view class="comment-all-container" v-else>
<!-- 标题 -->
<view class="comment-title">全部评论</view>
<!-- 评论内容 -->
<view class="comment-list">
<mescroll-body
ref="mescrollRef"
@init="mescrollInit"
@up="upCallback"
:down="{
use: false,
}"
>
<block v-for="(item, index) in commentList" :key="index">
<ArticleCommentItem :info="item.info" />
</block>
</mescroll-body>
</view>
</view>
</block>
</template>
<script>
import { getArticleCommentList } from "../../api/article";
import ArticleCommentItem from "../article-comment-item/article-comment-item";
// 2. 导入对应的 mixins(mescroll-mixins.js)
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
name: "article-comment-list",
components: { ArticleCommentItem },
// 3. 注册 mixins
mixins: [MescrollMixin],
props: {
articleId: {
type: String,
required: true,
},
},
data() {
return {
// 页数
page: 1,
// 每页评论数
pageSize: 5,
// 评论列表数据
commentList: [],
// 是否展示全部评论
isShowAllComment: false,
// mescroll实例
mescroll: null,
// 是否是首次加载
isInit: true
};
},
created() {
this.loadArticleList();
},
methods: {
async loadArticleList() {
const { data: res } = await getArticleCommentList({
articleId: this.articleId,
page: this.page,
size: this.pageSize,
});
console.log('评论总数', res.count);
// 判断是否为第一页数据
if (this.page === 1) {
this.commentList = res.list;
} else {
this.commentList = [...this.commentList, ...res.list];
}
},
// 加载更多评论
onMoreClick() {
this.isShowAllComment = true;
},
// 获取mescroll实例
getMeScroll() {
if (!this.mescroll) {
this.mescroll = this.$refs.mescrollRef.mescroll;
}
return this.mescroll;
},
// 页面初始加载
async mescrollInit() {
// 获取评论列表数据
await this.loadArticleList();
// 状态调整为非首次加载
this.isInit = false;
// 关闭加载中动画
this.getMeScroll().endSuccess();
},
// 上拉加载
async upCallback() {
if (this.isInit) return;
this.page += 1;
await this.loadArticleList();
this.getMeScroll().endSuccess();
},
},
};
</script>
<style lang="scss" scoped>
.comment-limit-container,
.comment-all-container {
padding: $uni-spacing-sm $uni-spacing-col-base;
color: $uni-text-color;
.comment-title {
font-size: $uni-font-lg;
font-weight: bold;
}
.comment-list {
padding: $uni-spacing-col-base 0;
}
.show-more {
font-size: $uni-font-base;
color: $uni-show-color;
text-align: center;
}
}
</style>-------------------------------------------------
已解决,组件所在的页面blog-detail中的配置项ref属性写错了。。正确的是mescrollItem,我写成mscrollItem了。。。
写回答
1回答
-
潜行的夜猫子
2023-11-21
关闭加载中动画的代码,还需要修正一下
this.getMeScroll().endSuccess(this.commentList.length, this.commentList.length < this.commentListTotal);012023-11-21
相似问题