一、加載更多：

在到達底部時，將新請求過來的數據追加到原來的數組即可：

import {onReachBottom
} from "@dcloudio/uni-app";const pets = ref([]); // 顯示數據function network() {uni.request({url: "https://api.thecatapi.com/v1/images/search",data: {limit: 10}}).then(res => {pets.value = [...pets.value, ...res.data]; }).catch(error => {uni.showToast({title: '請求有誤會',icon: "none"})}).finally(() => {// uni.hideLoading();uni.hideNavigationBarLoading();uni.stopPullDownRefresh();})
}onReachBottom(() => {network();
})

二、下拉刷新：

在下拉時加載新數據：

	import {onPullDownRefresh} from "@dcloudio/uni-app";onPullDownRefresh(() => {pets.value = []; // 先將原來的數據清空，然后加載新數據network();})

三、返回頂部：

使用Uniapp界面滾動API實現：

		uni.pageScrollTo({scrollTop: 0,duration: 100})

其它知識點：

uni.showNavigationBarLoading(); // 導航欄中顯示加載狀態
uni.hideNavigationBarLoading(); // 導航欄中隱藏加載狀態
? ??
// 頁面中顯示加載狀態
uni.showLoading({
??? ?title: '加載中'
});

uni.hideLoading(); // 頁面中隱藏加載狀態

uni.startPullDownRefresh(); // 下拉，需在pages.json對應頁面的style位置開啟：enablePullDownRefresh
uni.stopPullDownRefresh(); // 停止下拉

env(safe-area-inset-bottom)：css中獲取底部安全區高度；

組件完整代碼：

<template><view class="container"><view class="monitor-list-wrapper"><view class="monitor-list" v-for="(pet, index) in pets" :key="pet.id"><image lazy-load :src="pet.url" mode="aspectFill" class="monitor-photo" @click="onPreview(index)"></image><view class="monitor-title">{{pet.id}}</view></view></view><view class="load-more"><uni-load-more status="loading"></uni-load-more></view><view class="float"><view class="item" @click="onRefresh"><uni-icons type="refresh" size="26" color="#888"></uni-icons></view><view class="item" @click="onTop"><uni-icons type="arrow-up" size="26" color="#888"></uni-icons></view></view></view>
</template><script setup>import {ref} from "vue";import {onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app";const pets = ref([]);function network() {// uni.showLoading({// 	title: '加載中'// });uni.showNavigationBarLoading();uni.request({url: "https://api.thecatapi.com/v1/images/search",data: {limit: 10}}).then(res => {pets.value = [...pets.value, ...res.data];}).catch(error => {uni.showToast({title: '請求有誤會',icon: "none"})}).finally(() => {// uni.hideLoading();uni.hideNavigationBarLoading();uni.stopPullDownRefresh();})}network();// 圖片預覽function onPreview(index) {const urls = pets.value.map(item => item.url);uni.previewImage({current: index,urls})}function onRefresh() {uni.startPullDownRefresh(); // 需在pages.json對應位置開啟：enablePullDownRefresh}function onTop() {uni.pageScrollTo({scrollTop: 0,duration: 100})}onReachBottom(() => {network();})onPullDownRefresh(() => {pets.value = [];network();})
</script><style lang="scss" scoped>.container {padding: 0 $myuni-spacing-super-lg;background: #D4ECFF;}.monitor-list-wrapper {display: grid;grid-template-columns: repeat(2, 1fr);gap: $myuni-spacing-lg;.monitor-list {border-radius: $myuni-border-radius-base;padding: $myuni-spacing-lg;width: 305rpx;background-color: $myuni-bg-color;.monitor-photo {height: 200rpx;width: 100%;}}.monitor-title {height: 32rpx;line-height: 32rpx;color: $myuni-text-color;font-size: $myuni-font-size-lg;text-align: center;}}.load-more {padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);}.float {position: fixed;right: 30rpx;bottom: 80rpx;padding-bottom: env(safe-area-inset-bottom);.item {width: 90rpx;height: 90rpx;border-radius: 50%;background-color: rgba(255, 255, 255, 0.9);margin-bottom: 20rpx;display: flex;align-items: center;justify-content: center;border: 1px solid #EEE;}}
</style>

四、實現效果：