完成数据分页加载

src/components/ScrollList.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onLoading: {
+    type: Function,
+    default: async (page) => [],
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+});
+const refreshing = ref(false);
+const loading = ref(false);
+const noMore = ref(false);
+const page = ref(1);
+const refresherrefresh = async () => {
+  if (refreshing.value) return;
+  try {
+    refreshing.value = true;
+    page.value = 1;
+    const list = await props.onLoading(page.value);
+    if (list.length < props.pageSize) noMore.value = true;
+  } finally {
+    refreshing.value = false;
+  }
+};
+const scrolltolower = async () => {
+  if (loading.value) return;
+  try {
+    loading.value = true;
+    page.value += 1;
+    const list = await props.onLoading(page.value);
+    if (list.length < props.pageSize) noMore.value = true;
+  } finally {
+    loading.value = false;
+  }
+};
+watch(
+  () => props.show,
+  async (newVal) => {
+    if (newVal) await props.onLoading(1);
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<template>
+  <scroll-view
+    class="scroll-list"
+    scroll-y
+    refresher-default-style="white"
+    :refresher-enabled="true"
+    :refresher-triggered="refreshing"
+    @refresherrefresh="refresherrefresh"
+    @scrolltolower="scrolltolower"
+    :style="{
+      display: show ? 'flex' : 'none',
+    }"
+  >
+    <slot></slot>
+    <text class="tips" v-if="loading">加载中...</text>
+    <text class="tips" v-if="noMore">我是有底线的</text>
+  </scroll-view>
+</template>
+
+<style scoped>
+.scroll-list {
+  width: 100%;
+  height: 100%;
+}
+.tips {
+  color: #fff9;
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  margin: 10px;
+}
+</style>