完成数据分页加载

src/components/Container.vue

@@ -15,6 +15,10 @@ defineProps({
     type: Function,
     default: null,
   },
+  overflow: {
+    type: String,
+    default: "auto",
+  },
 });
 const isIos = ref(true);
 onMounted(() => {
@@ -29,7 +33,7 @@ onMounted(() => {
     <Header :title="title" :onBack="onBack" />
     <view
       class="content"
-      :style="{ height: `calc(100vh - ${isIos ? 105 : 95}px)` }"
+      :style="{ height: `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
     >
       <slot></slot>
     </view>
@@ -40,11 +44,9 @@ onMounted(() => {
 .content {
   width: 100vw;
   overflow-x: hidden;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 10px;
 }
 </style>

src/components/Header.vue

@@ -36,7 +36,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <view class="container" :style="{ paddingTop: isIos ? '35px' : '25px' }">
+  <view class="container" :style="{ paddingTop: isIos ? '38px' : '25px' }">
     <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
     </view>

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>