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

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

晓之蛇

2023-10-29

老师您好:

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

https://img.mukewang.com/szimg/653dfc3d09263d3205250666.jpg

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

https://img.mukewang.com/szimg/653dfc9b09c34eeb04900117.jpg

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

代码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);

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

uni-app从入门到进阶 系统完成项目实战

专门为小程序0基础学员而设,让你拥有能上线的作品

1105 学习 · 743 问题

查看课程