fix: longlist

src/components/LongList/index.vue

@@ -3,13 +3,36 @@
     ref="longListRef"
     class="long-list-wrap"
   >
+    <!-- <div
+      style="
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        z-index: 999;
+        color: red;
+      "
+    >
+      {{ status }}
+    </div> -->
     <slot></slot>
     <div
+      v-if="status === 'loading'"
       class="loading"
-      v-if="loading"
     >
       {{ t('common.loading') }}
     </div>
+    <div
+      v-if="status === 'nonedata'"
+      class="loading"
+    >
+      {{ t('common.nonedata') }}
+    </div>
+    <div
+      v-if="status === 'allLoaded'"
+      class="loading"
+    >
+      {{ t('common.allLoaded') }}
+    </div>
     <div ref="bottomRef"></div>
   </div>
 </template>
@@ -19,7 +42,6 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const longListRef = ref<HTMLElement>();
-const loading = ref(false);
 const bottomRef = ref<any>();
 const intersectionObserver = ref<IntersectionObserver>();
 
@@ -27,7 +49,6 @@ const { t } = useI18n();
 
 defineExpose({
   longListRef,
-  loading,
 });
 
 const props = withDefaults(
@@ -38,6 +59,7 @@ const props = withDefaults(
       bottom: number;
       left: number;
     };
+    status: 'loading' | 'nonedata' | 'allLoaded' | 'normal';
   }>(),
   {
     rootMargin: () => {
@@ -60,10 +82,10 @@ function monitTouchBottom() {
     (entries) => {
       entries.forEach((item) => {
         if (item.isIntersecting) {
-          console.log('到底了');
+          // console.log('到底了');
           emits('getListData');
         } else {
-          // console.log('隐藏');
+          // console.log('隐藏了');
         }
       });
     },

src/views/area/id/index.vue

@@ -5,15 +5,17 @@
     :style="{ height: height + 'px' }"
   >
     <LongList
+      v-if="height > 0"
       ref="longListRef"
       class="list"
       @get-list-data="getListData"
       :rootMargin="{
         top: 0,
-        bottom: 200,
+        bottom: 100,
         left: 0,
         right: 0,
       }"
+      :status="status"
     >
       <div
         v-for="(item, index) in liveRoomList"
@@ -52,41 +54,13 @@
         </div>
         <div class="desc">{{ item?.name }}</div>
       </div>
-      <div v-if="loading"></div>
-      <div
-        v-else-if="!liveRoomList.length"
-        class="null"
-      >
-        {{ t('common.nonedata') }}
-      </div>
-      <div
-        v-else-if="!hasMore"
-        class="null"
-      >
-        {{ t('common.allLoaded') }}
-      </div>
     </LongList>
-    <!-- <div
-      class="paging-wrap"
-      v-if="pageParams.total > pageParams.pageSize"
-    >
-      <n-pagination
-        v-model:page="pageParams.nowPage"
-        v-model:page-size="pageParams.pageSize"
-        :item-count="pageParams.total"
-        show-size-picker
-        :page-sizes="[30, 50, 100, 200]"
-        @update-page="getData"
-        @update-page-size="handleUpdatePageSize"
-      />
-    </div> -->
   </div>
 </template>
 
 <script lang="ts" setup>
 import { openToTarget } from 'billd-utils';
 import { onMounted, reactive, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import { fetchLiveRoomList } from '@/api/area';
@@ -101,12 +75,12 @@ import {
 } from '@/types/ILiveRoom';
 
 const liveRoomList = ref<ILiveRoom[]>([]);
-const { t } = useI18n();
 const route = useRoute();
+const status = ref<'loading' | 'nonedata' | 'allLoaded' | 'normal'>('loading');
 
 const longListRef = ref<InstanceType<typeof LongList>>();
 const topRef = ref<HTMLDivElement>();
-const height = ref(0);
+const height = ref(-1);
 const loading = ref(false);
 const hasMore = ref(true);
 const pageParams = reactive({
@@ -124,6 +98,21 @@ watch(
   }
 );
 
+function handleStatus() {
+  if (longListRef.value) {
+    if (loading.value) {
+      status.value = 'loading';
+    } else if (hasMore.value) {
+      status.value = 'normal';
+    } else {
+      status.value = 'allLoaded';
+    }
+    if (!liveRoomList.value?.length) {
+      status.value = 'nonedata';
+    }
+  }
+}
+
 function goRoom(item: ILiveRoom) {
   if (!item.live) {
     window.$message.info('该直播间没在直播~');
@@ -154,10 +143,8 @@ async function getData() {
   try {
     if (loading.value) return;
     loading.value = true;
+    status.value = 'loading';
     pageParams.nowPage += 1;
-    if (longListRef.value) {
-      longListRef.value.loading = true;
-    }
     const res = await fetchLiveRoomList({
       id: Number(route.params.id),
       live_room_is_show: LiveRoomIsShowEnum.yes,
@@ -173,9 +160,8 @@ async function getData() {
     console.log(error);
   }
   loading.value = false;
-  if (longListRef.value) {
-    longListRef.value.loading = false;
-  }
+  status.value = 'normal';
+  handleStatus();
 }
 </script>