完成数据分页加载

src/pages/my-growth.vue

@@ -3,6 +3,7 @@ import { onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowData from "@/components/BowData.vue";
+import ScrollList from "@/components/ScrollList.vue";
 import {
   getBattleListAPI,
   getPractiseResultListAPI,
@@ -12,32 +13,12 @@ import {
 import { ref } from "vue";
 
 const selectedIndex = ref(0);
-const matchPage = ref(1);
 const matchList = ref([]);
-const battlePage = ref(1);
 const battleList = ref([]);
 const practiseList = ref([]);
 const showBowData = ref(false);
 const arrows = ref([]);
 
-const handleSelect = async (index) => {
-  selectedIndex.value = index;
-  if (index === 0 && matchList.value.length === 0) {
-    const result = await getBattleListAPI(matchPage.value, 2);
-    matchList.value = result;
-    matchPage.value += 1;
-  }
-  if (index === 1 && battleList.value.length === 0) {
-    const result = await getBattleListAPI(battlePage.value, 1);
-    battleList.value = result;
-    battlePage.value += 1;
-  }
-  if (index === 2 && practiseList.value.length === 0) {
-    const result = await getPractiseResultListAPI();
-    practiseList.value = result.list;
-  }
-};
-
 const toMatchDetail = (id) => {
   uni.navigateTo({
     url: `/pages/match-detail?id=${id}`,
@@ -48,146 +29,157 @@ const getPractiseDetail = async (id) => {
   arrows.value = JSON.parse(result.UserPracticeRound.arrows);
   showBowData.value = true;
 };
-onMounted(async () => {
-  const result = await getBattleListAPI(matchPage.value, 2);
-  matchList.value = result;
-  matchPage.value += 1;
-});
+const onMatchLoading = async (page) => {
+  const result = await getBattleListAPI(page, 2);
+  if (page === 1) {
+    matchList.value = result;
+  } else {
+    matchList.value = matchList.value.concat(result);
+  }
+  return result.length;
+};
+const onBattleLoading = async (page) => {
+  const result = await getBattleListAPI(page, 1);
+  if (page === 1) {
+    battleList.value = result;
+  } else {
+    battleList.value = battleList.value.concat(result);
+  }
+  return result.length;
+};
+const onPractiseLoading = async (page) => {
+  const result = await getPractiseResultListAPI(page);
+  if (page === 1) {
+    practiseList.value = result;
+  } else {
+    practiseList.value = practiseList.value.concat(result);
+  }
+  return result.length;
+};
 </script>
 
 <template>
-  <Container title="我的成长脚印">
-    <view class="container">
-      <view class="tabs">
-        <view
-          v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
-          :key="index"
-          :style="{
-            color: index === selectedIndex ? '#000' : '#fff',
-            backgroundColor:
-              index === selectedIndex ? '#FFD947' : 'transparent',
-          }"
-          @tap="handleSelect(index)"
-        >
-          {{ rankType }}
-        </view>
+  <Container title="我的成长脚印" overflow="hidden">
+    <view class="tabs">
+      <view
+        v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
+        :key="index"
+        :style="{
+          color: index === selectedIndex ? '#000' : '#fff',
+          backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
+        }"
+        @tap="() => (selectedIndex = index)"
+      >
+        {{ rankType }}
       </view>
-      <view class="contents">
+    </view>
+    <view class="contents">
+      <ScrollList :show="selectedIndex === 0" :onLoading="onMatchLoading">
         <view
-          :style="{
-            display: selectedIndex === 0 ? 'flex' : 'none',
-          }"
+          v-for="(item, index) in matchList"
+          :key="index"
+          @click="() => toMatchDetail(item.battleId)"
         >
-          <view
-            v-for="(item, index) in matchList"
-            :key="index"
-            @click="() => toMatchDetail(item.battleId)"
-          >
-            <view class="contest-header">
-              <text>{{ item.name }}</text>
-              <text>{{ item.createdAt }}</text>
-              <image src="../static/back.png" mode="widthFix" />
-            </view>
-            <view v-if="item.mode === 1" class="contest-team">
-              <block v-if="item.bluePlayers[0]">
-                <view class="player">
-                  <Avatar frame :src="item.bluePlayers[0].avatar" />
-                  <text>{{ item.bluePlayers[0].name }}</text>
-                  <image
-                    v-if="item.winner === 1"
-                    src="../static/winner-badge.png"
-                    mode="widthFix"
-                  />
-                </view>
-              </block>
-              <block v-if="item.redPlayers[0]">
-                <view class="player">
-                  <Avatar frame :src="item.redPlayers[0].avatar" />
-                  <text>{{ item.redPlayers[0].name }}</text>
-                  <image
-                    v-if="item.winner === 0"
-                    src="../static/winner-badge.png"
-                    mode="widthFix"
-                  />
-                </view>
-              </block>
-            </view>
-            <view v-if="item.mode === 2" class="contest-multi">
-              <view
-                class="player"
-                v-for="(p, index2) in item.players"
-                :key="index2"
-              >
-                <Avatar :rank="index2 + 1" :src="p.avatar" />
-                <text>{{ p.name }}</text>
-              </view>
-            </view>
+          <view class="contest-header">
+            <text>{{ item.name }}</text>
+            <text>{{ item.createdAt }}</text>
+            <image src="../static/back.png" mode="widthFix" />
           </view>
-        </view>
-        <view
-          :style="{
-            display: selectedIndex === 1 ? 'flex' : 'none',
-          }"
-        >
-          <view
-            v-for="(item, index) in battleList"
-            :key="index"
-            @click="() => toMatchDetail(item.battleId)"
-          >
-            <view class="contest-header">
-              <text>{{ item.name }}</text>
-              <text>{{ item.createdAt }}</text>
-              <image src="../static/back.png" mode="widthFix" />
-            </view>
-            <view v-if="item.mode === 1" class="contest-team">
-              <view
-                class="player"
-                v-for="(p, index2) in item.players"
-                :key="index2"
-              >
-                <Avatar frame :src="p.avatar" />
-                <text>{{ p.name }}</text>
+          <view v-if="item.mode === 1" class="contest-team">
+            <block v-if="item.bluePlayers[0]">
+              <view class="player">
+                <Avatar frame :src="item.bluePlayers[0].avatar" />
+                <text>{{ item.bluePlayers[0].name }}</text>
                 <image
-                  v-if="index2 === 0"
+                  v-if="item.winner === 1"
                   src="../static/winner-badge.png"
                   mode="widthFix"
                 />
               </view>
-            </view>
-            <view v-if="item.mode === 2" class="contest-multi">
-              <view
-                class="player"
-                v-for="(p, index2) in item.players"
-                :key="index2"
-              >
-                <Avatar :rank="index2 + 1" :src="p.avatar" />
-                <text>{{ p.name }}</text>
+            </block>
+            <block v-if="item.redPlayers[0]">
+              <view class="player">
+                <Avatar frame :src="item.redPlayers[0].avatar" />
+                <text>{{ item.redPlayers[0].name }}</text>
+                <image
+                  v-if="item.winner === 0"
+                  src="../static/winner-badge.png"
+                  mode="widthFix"
+                />
               </view>
+            </block>
+          </view>
+          <view v-if="item.mode === 2" class="contest-multi">
+            <view
+              class="player"
+              v-for="(p, index2) in item.players"
+              :key="index2"
+            >
+              <Avatar :rank="index2 + 1" :src="p.avatar" />
+              <text>{{ p.name }}</text>
             </view>
           </view>
         </view>
+      </ScrollList>
+      <ScrollList :show="selectedIndex === 1" :onLoading="onBattleLoading">
         <view
-          :style="{
-            display: selectedIndex === 2 ? 'flex' : 'none',
-          }"
+          v-for="(item, index) in battleList"
+          :key="index"
+          @click="() => toMatchDetail(item.battleId)"
         >
-          <view
-            v-for="(item, index) in practiseList"
-            :key="index"
-            class="practice-record"
-            @click="() => getPractiseDetail(item.id)"
-          >
-            <text>单组练习 {{ item.createdAt }}</text>
+          <view class="contest-header">
+            <text>{{ item.name }}</text>
+            <text>{{ item.createdAt }}</text>
             <image src="../static/back.png" mode="widthFix" />
           </view>
+          <view v-if="item.mode === 1" class="contest-team">
+            <view
+              class="player"
+              v-for="(p, index2) in item.players"
+              :key="index2"
+            >
+              <Avatar frame :src="p.avatar" />
+              <text>{{ p.name }}</text>
+              <image
+                v-if="index2 === 0"
+                src="../static/winner-badge.png"
+                mode="widthFix"
+              />
+            </view>
+          </view>
+          <view v-if="item.mode === 2" class="contest-multi">
+            <view
+              class="player"
+              v-for="(p, index2) in item.players"
+              :key="index2"
+            >
+              <Avatar :rank="index2 + 1" :src="p.avatar" />
+              <text>{{ p.name }}</text>
+            </view>
+          </view>
         </view>
-      </view>
-      <BowData
-        :arrows="arrows"
-        :show="showBowData"
-        :onClose="() => (showBowData = false)"
-      />
+      </ScrollList>
+      <ScrollList
+        :show="selectedIndex === 2"
+        :onLoading="onPractiseLoading"
+        :pageSize="15"
+      >
+        <view
+          v-for="(item, index) in practiseList"
+          :key="index"
+          class="practice-record"
+          @click="() => getPractiseDetail(item.id)"
+        >
+          <text>单组练习 {{ item.createdAt }}</text>
+          <image src="../static/back.png" mode="widthFix" />
+        </view>
+      </ScrollList>
     </view>
+    <BowData
+      :arrows="arrows"
+      :show="showBowData"
+      :onClose="() => (showBowData = false)"
+    />
   </Container>
 </template>
 
@@ -209,8 +201,13 @@ onMounted(async () => {
   text-align: center;
   border-radius: 20px;
 }
-.contents > view {
+.contents {
   width: 100%;
+  height: calc(100% - 50px);
+}
+.contents > scroll-view {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }