From 0f29ef8edb92c1bbf783ac39610ca8591f58294d Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期三, 28 五月 2025 12:00:28 +0800 Subject: [PATCH] 视频主评论下滑加载 --- pages/tabbar/index/home.vue | 36 +++++++++++++++++++++++++++++++----- 1 files changed, 31 insertions(+), 5 deletions(-) diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue index d7a4d70..c43e545 100644 --- a/pages/tabbar/index/home.vue +++ b/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"></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: '鑾峰彇璇勮澶辫触', -- Gitblit v1.8.0