视频主评论下滑加载

xiangpei

2025-05-28 0f29ef8edb92c1bbf783ac39610ca8591f58294d

视频主评论下滑加载

 pages/tabbar/index/home.vue

@@ -97,7 +97,7 @@
    <uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
      <view class="comment-popup">
        <view class="popup-header">
          <text class="popup-title">评论({{comments.length}})</text>
          <text class="popup-title">评论({{commentsTotal}})</text>
          <text class="iconfont close-icon" @click="closeCommentPopup">&#xe675;</text>
        </view>
        
@@ -143,6 +143,7 @@
export default {
  data() {
    return {
        commentNoMore: false, // 是否还有更多评论
        commentQuery: {
            pageNumber: 1,
            pageSize: 5,
@@ -156,6 +157,7 @@
            replyId: null
        },
        comments: [],            // 评论列表
        commentsTotal: 0,            // 评论总条数
        commentLoading: false,   // 评论加载状态
        startHidenTime: 0, // 记录切换至其它页面的时间，用于计算视频观看时间减去的部分
        totalHidenTime: 0, // 总共隐藏页面的时间
@@ -229,10 +231,12 @@
                                replyId: null
                  }
                  this.comments.unshift(res.data.data);
                  console.log("新增后",this.comments);
                  uni.showToast({
                    title: '评论成功'
                  });
                  // 当前视频评论数加一
                  this.commentsTotal += 1;
                  this.videoList[this.currentIndex].commentNum += 1;
              } else {
                  uni.showToast({
@@ -249,7 +253,6 @@
        },
        // 关闭评论弹窗
        closeCommentPopup() {
            console.log("触发了");
          this.$refs.commentPopup.close()
          this.showCommentPopup = false;
          this.comments = [];
@@ -259,11 +262,30 @@
              commentContent: '',
              replyId: null
          }
          this.commentQuery.pageNumber = 1;
          this.commentNoMore = false;
        },
        // 下滑评论区加载评论
        async getCommentPage() {
            this.commentQuery.pageNumber += 1;
            if(this.commentNoMore) {
                return;
            }
            getVideoComments(this.commentQuery).then(res => {
                this.comments.push(res.data.data)
                if(this.commentQuery.pageNumber === 1) {
                    this.comments = res.data.data
                } else {
                    this.comments = [
                      ...this.comments,
                      ...res.data.data.filter(
                        (newItem) => !this.comments.some((oldItem) => oldItem.id === newItem.id)
                      ),
                    ];
                }
                if (res.data.data.length < this.commentQuery.pageSize) {
                    this.commentNoMore = true;
                    return;
                }
                this.commentQuery.pageNumber++;
            })
        },
        // 显示评论弹窗
@@ -273,8 +295,12 @@
          this.commentLoading = true;
          this.commentQuery.videoId = item.id
          // 首次加载评论分页大小增加一倍，以产生滚动条，后续可触发
          this.commentQuery.pageSize *= 2;
          getVideoComments(this.commentQuery).then(res => {
              this.comments = res.data.data
              this.commentsTotal = res.data.total;
              this.comments = res.data.data;
              this.commentQuery.pageNumber += 2;
              this.commentQuery.pageSize /= 2;
          }).catch(() => {
              uni.showToast({
                title: '获取评论失败',