uniapp的分页触底加载更多

<template>
	<view class="p-2">
		<view class="wrap p-2 mb-2">
			<view class="d-flex a-center j-sb">
				<view class="d-flex flex-shrink">
					<view>班组:</view>
					<view class="text-primary ml-2">乙班</view>
				</view>
				<view class="d-flex flex-shrink a-center">
					<view>班次</view>
					<view class="text-primary ml-2">早班</view>
				</view>
			</view>
			<view class="d-flex a-center mt-1">
				<view>开始时间:</view>
				<view class="ml-2">222222222222222222</view>
			</view>
			<view class="d-flex a-center mt-1">
				<view>结束时间:</view>
				<view class="ml-2">222222222222222222</view>
			</view>
			<view class="d-flex a-center mt-1">
				<view>操作时间:</view>
				<view class="ml-2 text-secondary">222222222222222222</view>
			</view>
		</view>
		<u-loadmore class="mt-1" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" :line="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthId: null,
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '已加载',
				nomoreText: '已加载全部数据',
				listData: [],
				tableData: {
					page: 1,
					limit: 10,
					total: 0,
					orderId: null,
					type: 1
				},
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.monthId = opt.id
			this.getData()
		},
		onReachBottom() {
			if (this.tableData.page >= this.tableData.total) {
				this.status = 'nomore'
				return;
			}
			this.tableData.page++;
			this.getData()
		},
		methods: {
			getData() {
				this.status = 'loading'
				this.tableData.orderId=this.monthId,
				this.$http.post('/dps/dps-work-order/page', this.tableData).then(res => {
					this.tableData.total = res.data.totalPages
					this.status = ''
					this.listData = this.listData.concat(res.data.list)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, .2);
	}
</style>