请稍等 ...

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

老师您好：

【完成全部评论的分页加载】这一节，我点击【查看更多评论】，只能加载5条评论。

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

目前还没有到下一章节视频处理到底部提示，请看下当前问题如何处理，谢谢！

代码article-comment-list.vue：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<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了。。。

晓之蛇 2023-10-29 14:38:30

源自：8-15 评论列表 - 完成全部评论的分页加载

220

收起

提交取消

1回答

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

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

0 回复有任何疑惑可以回复我~

收起回答

提问者晓之蛇 #1

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

回复有任何疑惑可以回复我~ 2023-11-21 16:47:51