滑动加载组件

App.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { onLaunch } from "@dcloudio/uni-app"
+
 onLaunch(() => {
 	const updateManager = wx.getUpdateManager()
 	updateManager.onCheckForUpdate(function (res) {
@@ -36,5 +37,6 @@ onLaunch(() => {
 .main {
 	min-height: 95vh;
     background: linear-gradient(to top, #f2f8ff 0%, #e7f0fd 100%);
+	padding-top: 20rpx;
 }
 </style>

components/Loadmore/Loadmore.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from "vue";
+import { onReachBottom } from "@dcloudio/uni-app"
+const emit = defineEmits(["reachBottom"])
+// 当前数量，总数量
+const props = defineProps({
+    number: Number,
+    total: Number
+})
+let loadState = ref("loading")
+// 触底事件
+onReachBottom(() => {
+    console.log(props);
+    if (props.number < props.total) {
+        loadState.value = "loading"
+    } else if (props.number == props.total) {
+        loadState.value = "finished"
+    }
+    emit("reachBottom")
+})
+</script>
+<template>
+    <slot></slot>
+    <wd-watermark content="wot-design-uni"></wd-watermark>
+    <wd-loadmore :state="loadState" loading-text="数据加载中"/>
+</template>