Applet/pages/recruit/index.vue

<template>
	<view class="container">
		<uni-list>
			<uni-list-item v-for="(item, index) in list" :key="index">
				<!-- 自定义 body -->
				<template v-slot:body>
					<view class="slot-body" @click="btn(item)">
						<view class="slot-box slot-title">{{ item.topic }}</view>
						<text class="status">{{ item.statusText }}</text>
						<view class="slot-box slot-text">
							人数限制: {{ item.count }}人
						</view>
					</view>
				</template>
				<!-- 自定义 footer-->
				<template v-slot:footer>
					<view class="slot-footer" @click="btn(item)">
						<uni-icons class="footerIcon" type="forward" size="35"></uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="more" />
	</view>
</template>

<script>
	import request from '../../api/recruit.js';
	export default {
		data() {
			return {
				list: [],
				more: 'more',
				page: 0,
				size: 12,
			}
		},
		mounted() {
			this.query();
		},
		methods: {
			async query() {
				this.page += 1;
				this.more = 'loading';
				const res = await request.getList({ pageNum: this.page, pageSize: this.size });
				res.rows?.map(e => {
					if (e.status == 1) e.statusText = '未开始';
					if (e.status == 2) e.statusText = '报名中';
					if (e.status == 3) e.statusText = '已结束';
					return e;
				})
				this.list.push(...res.rows)
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(res.total / this.size) ? 'noMore' : 'more';
			},
			btn(e) {
				uni.navigateTo({ url: `/pages/recruit/details?id=${e.recruitId}` })
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.query();
			}
		}
	}
</script>

<style>
.slot-box {
	position: relative;
}
.status {
	font-size: 12px;
	color: #999;
}
.slot-body {
	width: 90%;
	margin-left: 10px;
}
.slot-title {
	font-size: 1.2em;
	font-weight: 600;
	color: #000;
}
.slot-text {
	font-size: 14px;
	color: #999;
}
.footerIcon {
	line-height: 4em;
}
</style>