拉到底加载更多，下拉刷新

感觉还是不够清晰方便，在各种使用场景后端各种传参时，就比较乱了，后面使用函数重载区分一下

/stores/workStatusInfo.js

// 全局配置
import {
	defineStore
} from 'pinia'
import { records } from "@/api/dutyApi.js"
export const scrollList = defineStore('scrollConfig', {
	state: () => {
		return {
			// 查询结果
			SearchList: [],
			//查询参数
			ListParams: {
				pageNumber: 1,
				pageSize: 10,
			},
			//是否还有更多数据
			IsMoreList: true
		}
	},
	getters: {
		getSearchList(state) {
			let List = state.SearchList || []
			return List
		},
		getListParams(state) {
			return state.SearchList || {}
		},
	},
	actions: {
		//重新设置形成的数组
		setSearchList(list) {
			this.SearchList = list
		},
		getList(params) {
			// 如果没有携带参数，且操作不为下拉，为刷新，因为刷新前肯定请求过数据，参数都存下来了
			if (!params || !params.islower) {
				this.SearchList = []
				this.ListParams.pageNumber = 1
				this.IsMoreList = true
			}
			// 有参数就 合并参数，一般为第一次请求和查询
			if (params) {
				this.ListParams = {
					...this.ListParams,
					...params
				}
			}
			return new Promise((resolve, reject) => {
				//判断数据是否加载完了，false为加载完了，true为可以继续加载
				if (this.IsMoreList) {
					records(this.ListParams).then(res => {
						//判断是否有数据返回 及 防呆处理
						if (res.data && res.data.rows && res.data.rows.length) {
							//页码为1 重新赋值 
							//页面不为1 数组push
							if (this.ListParams.pageNumber == 1) {
								this.SearchList = res.data.rows
							} else {
								this.SearchList.push(...res.data.rows)
							}
							//页面+1
							this.ListParams.pageNumber++
							//如果返回row长度小于传参的一页多少条，证明数据加载完了
							//反之
							if (res.data.rows.length < this.ListParams.pageSize) {
								this.IsMoreList = false
								resolve("数据已全部加载完毕")
							} else {
								resolve("正在加载")
							}
						} else {
							this.IsMoreList = false
							resolve("数据已全部加载完毕")
						}
					})
				}
			})
		}
	}
})

页面

<template>
	<scroll-view class="container" scroll-y refresher-enabled :refresher-triggered="refresherTriggered"
		refresher-background="transparent" scroll-with-animation @refresherrefresh="pullDownRefresh"
		@scrolltolower="scrolltolower">
		<view v-if="recordList.length">
			<view class="car_card" v-for="item in recordList">
				{{ item }}
			</view>
			<view class="loading_tips">{{ IsMoreList }}</view>
		</view>
		<view v-else>
			查无数据
		</view>
	</scroll-view>
</template>

<script setup>
import {
	ref,
	watch,
	computed,
	nextTick
} from "vue"
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app'
import { scrollListStore } from '@/stores/workStatusInfo.js'
const useScrollListStore = scrollListStore()

// /获取数据
let IsMoreList = ref()
function getdata(islower = 0) {
	let params = {
		islower: islower,
	}
	useScrollListStore.getList(params).then(result => {
		//是否没有更多数据
		IsMoreList.value = result
	})
	setTimeout(() => {
		refresherTriggered.value = false
	}, 1000);
}
const recordList = computed(() => {
	return useScrollListStore.getSearchList;
});
//下拉刷新
let refresherTriggered = ref(false)
function pullDownRefresh() {
	console.log("下拉刷新");
	refresherTriggered.value = true
	getdata()
}
//上拉加载更多
function scrolltolower() {
	console.log("到底加载更多");
	getdata(1)
}
onLoad((options) => {
	recordList.value = []//这里赋予空值的目的是让滚动条回归顶端
	getdata()
})
</script>

<style lang="scss" scoped>
.container {
	overflow-x: hidden;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	overflow-y: auto;

	.loading_tips {
		text-align: center;
		padding-bottom: 20rpx;
		color: #999;
		height: calc(200rpx + var(--status-bar-height));
	}
}
</style>

页面也可进一步分解