视频主评论下滑加载

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: '获取评论失败',