为什么只能加载5条评论？

Question

老师您好：

【完成全部评论的分页加载】这一节，我点击【查看更多评论】，只能加载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了。。。

Answer 1

潜行的夜猫子 2023-11-21 16:40:18

关闭加载中动画的代码，还需要修正一下   this.getMeScroll().endSuccess(this.commentList.length, this.commentList.length < this.commentListTotal);

• 提问者 晓之蛇 #1

  我是老师的代码，也没问题，应该两种都可以
        // 关闭上拉加载
        this.getMescroll().endSuccess();
        // 判断当评论数据全部加载完成，隐藏上拉加载的状态，展示结束语
        this.getMescroll().endBySize(
          this.commentList.length,
          this.commentListTotal
        );