...

src/pages/point-book-list.vue

@@ -4,12 +4,25 @@ import Container from "@/components/Container.vue";
 import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
 import PointRecord from "@/components/PointRecord.vue";
+import ScrollList from "@/components/ScrollList.vue";
+import { getPointBookListAPI } from "@/apis";
 
 const bowType = ref("");
 const distance = ref(0);
 const bowtargetType = ref("");
 const showModal = ref(false);
 const selectorIndex = ref(0);
+const list = ref([]);
+
+const onListLoading = async (page) => {
+  const result = await getPointBookListAPI(page, 1);
+  if (page === 1) {
+    list.value = result;
+  } else {
+    list.value = list.value.concat(result);
+  }
+  return result.length;
+};
 
 const openSelector = (index) => {
   selectorIndex.value = index;
@@ -25,9 +38,9 @@ const onSelectOption = (itemIndex, value) => {
     bowtargetType.value = value;
   }
 };
-const toDetailPage = (record) => {
+const toDetailPage = (id) => {
   uni.navigateTo({
-    url: `/pages/point-book-detail?id=${record.id}`,
+    url: `/pages/point-book-detail?id=${id}`,
   });
 };
 </script>
@@ -61,9 +74,15 @@ const toDetailPage = (record) => {
         </view>
       </view>
       <view class="point-records">
-        <view v-for="i in 4" :key="i" @click="toDetailPage">
-          <PointRecord />
-        </view>
+        <ScrollList :onLoading="onMatchLoading">
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            @click="() => toDetailPage(item.id)"
+          >
+            <PointRecord />
+          </view>
+        </ScrollList>
       </view>
       <SModal
         :show="showModal"