细节修改

src/components/ScrollList.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -14,9 +15,10 @@ const props = defineProps({
     default: 10,
   },
 });
-const refreshing = ref(false);
+const refreshing = ref(true);
 const loading = ref(false);
 const noMore = ref(false);
+const count = ref(0);
 const page = ref(1);
 const refresherrefresh = async () => {
   if (refreshing.value) return;
@@ -24,6 +26,7 @@ const refresherrefresh = async () => {
     refreshing.value = true;
     page.value = 1;
     const length = await props.onLoading(page.value);
+    count.value = length;
     if (length < props.pageSize) noMore.value = true;
   } finally {
     refreshing.value = false;
@@ -35,20 +38,21 @@ const scrolltolower = async () => {
     loading.value = true;
     page.value += 1;
     const length = await props.onLoading(page.value);
+    count.value += length;
     if (length < props.pageSize) noMore.value = true;
   } finally {
     loading.value = false;
   }
 };
-watch(
-  () => props.show,
-  async (newVal) => {
-    if (newVal) await props.onLoading(1);
-  },
-  {
-    immediate: true,
+onShow(async () => {
+  try {
+    const length = await props.onLoading(page.value);
+    count.value = length;
+    if (length < props.pageSize) noMore.value = true;
+  } finally {
+    refreshing.value = false;
   }
-);
+});
 </script>
 
 <template>
@@ -68,8 +72,10 @@ watch(
     }"
   >
     <slot></slot>
-    <text class="tips" v-if="loading">加载中...</text>
-    <text class="tips" v-if="noMore">我是有底线的</text>
+    <view class="tips">
+      <text v-if="loading">加载中...</text>
+      <text v-if="noMore">{{ count === 0 ? "暂无数据" : "没有更多了" }}</text>
+    </view>
   </scroll-view>
 </template>
 
@@ -79,7 +85,10 @@ watch(
   height: 100%;
 }
 .tips {
-  color: #fff9;
+  height: 50rpx;
+}
+.tips > text {
+  color: #d0d0d0;
   display: block;
   text-align: center;
   font-size: 12px;