feat: add load-more behavior to overall ranking

src/views/Ranking/Overall/Ranking.vue

@@ -271,6 +271,9 @@
               </div>
             </div>
           </div>
+
+          <!-- 触发加载功能 -->
+          <div ref="RankingLoadmore" v-show="showRankingLoading"></div>
         </div>
       </div>
     </div>
@@ -388,7 +391,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
@@ -423,6 +426,9 @@ const myRanking = ref({}) //我的排名
 
 // 预加载状态
 const isLoading = ref(true)
+const RankingLoadmore = ref(null) // 触底模块
+const showRankingLoading = ref(false) // 触底加载功能
+const loadedCount = ref(10) // 初始加载 10 条
 
 const currentBgImage = computed(() => {
   if (rankingType.value == 'Wealth') {
@@ -467,6 +473,9 @@ const updateTimeRanking = () => {
   } else if (selectedTimeTab.value == 'Monthly' && totalRanking.value.monthly) {
     showRanking.value = totalRanking.value.monthly
   }
+
+  loadedCount.value = 10
+  showRankingLoading.value = showRanking.value.length > 13
 }
 const ThrottleChangeType = (type) => {
   if (rankingType.value != type) {
@@ -487,6 +496,8 @@ const ThrottleChangeType = (type) => {
     totalRanking.value = {}
     showRanking.value = []
     myRanking.value = {}
+    loadedCount.value = 10
+    showRankingLoading.value = false
 
     getRanking() // 获取榜单
     getMyRankingInfo() //获取我的排名
@@ -515,6 +526,8 @@ const ThrottleChangeDateType = (dateType) => {
     // 清空数据
     showRanking.value = []
     myRanking.value = {}
+    loadedCount.value = 10
+    showRankingLoading.value = false
 
     updateTimeRanking() //筛选展示榜单
     getMyRankingInfo() //获取我的排名
@@ -541,7 +554,8 @@ const RankingTop3 = computed(() => {
 
 // 从第四名开始榜单
 const RankingFromTop4 = computed(() => {
-  return showRanking.value.filter((_, index) => index >= 3)
+  const allItems = showRanking.value.filter((_, index) => index >= 3)
+  return allItems.slice(0, loadedCount.value)
   // return []
 })
 
@@ -618,6 +632,23 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+const loadMoreObserver = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (!entry.isIntersecting || !showRankingLoading.value) return
+
+      const totalItems = showRanking.value.filter((_, index) => index >= 3).length
+      const nextLoadedCount = Math.min(loadedCount.value + 10, totalItems)
+
+      loadedCount.value = nextLoadedCount
+      showRankingLoading.value = nextLoadedCount < totalItems
+    })
+  },
+  {
+    rootMargin: '100px',
+  },
+)
+
 // 跳转app
 const gotoAppPage = (id) => {
   if (isInAppEnvironment.value) {
@@ -691,7 +722,18 @@ onMounted(() => {
   connectToAppHandler()
   isInAppEnvironment.value = isInApp()
 
-  observer.observe(sentinel.value)
+  if (sentinel.value) {
+    observer.observe(sentinel.value)
+  }
+
+  if (RankingLoadmore.value) {
+    loadMoreObserver.observe(RankingLoadmore.value)
+  }
+})
+
+onUnmounted(() => {
+  observer.disconnect()
+  loadMoreObserver.disconnect()
 })
 </script>