book-hi/components/pageScroll/index.vue

<template>
	<!-- 列表 -->
	<scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
		@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
		<!-- 空状态 -->
		<view v-if="!loading && !dataList.length" class="empty-state">
			<slot v-if="slotEmpty" name="empty"></slot>
			<u-empty v-else mode="list" text="暂无扫描记录" margin-top="200"></u-empty>
		</view>

		<slot></slot>

		<!-- 加载更多 -->
		<view class="load-more" v-if="dataList.length > 0">
			<u-divider bg-color="#f8f8f8">{{ hasMore ? '加载中...' : '我是有底线的' }}</u-divider>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				isRefreshing: false,
				loading: false,
				page: 1,
				hasMore: true,
				dataList: [],
			}
		},
		props: {
			url: {
				type: String,
				required: true,
				default: '/token/order/scanLogs'
			},
			pageSize: {
				type: Number,
				default: 10
			},
			slotEmpty: {
				type: Boolean,
				default: false
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			// 加载数据
			async loadData(isRefresh = false) {
				if (isRefresh) {
					this.page = 1
					this.hasMore = true
				}
				console.log(this.dataList, this.hasMore, this.loading, 'xxxxx')
				if (!this.hasMore || this.loading) return

				this.loading = true

				try {
					const res = await this.fetchBookList()

					if (isRefresh) {
						this.dataList = res.list
					} else {
						this.dataList = [...this.dataList, ...res.list]
					}
					this.$emit('updateList', this.dataList)

					this.hasMore = res.hasMore
					this.page++
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					if (isRefresh) {
						this.isRefreshing = false
					}
				}
			},

			// 模拟获取数据
			fetchBookList() {
				return new Promise((resolve) => {
					uni.$u.http.get(this.url, {
						pageSize: this.pageSize,
						pageNum: this.page
					}).then(res => {
						resolve({
							list: res.rows,
							hasMore: res.rows.length < res.total - this.dataList.length
						})
					})
				})
			},

			reloadData() {
				this.page = 1
				this.fetchBookList()
			},

			// 下拉刷新
			async onRefresh() {
				if (this.loading) return
				this.isRefreshing = true
				await this.loadData(true)
			},

			// 上拉加载更多
			async onLoadMore() {
				if (this.loading || !this.hasMore) return
				await this.loadData()
			},
		}
	}
</script>

<style lang="scss">
	.scroll-view {
		height: calc(100vh - 88rpx);
	}

	.load-more {
		width: 100%;
		display: flex;
		color: #999999;
		font-size: 24rpx;
		padding: 30rpx 0;
		justify-content: center;
	}
</style>