Applet/pages/activity/index.vue

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

<script>
	import request from '../../api/activity.js';
	import { BASE_URL } from '../../env.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.getActivity({ pageNum: this.page, pageSize: this.size });
				res.rows?.map(e => {
					if (e.status == 0) e.statusText = '未开始';
					// if (e.status == 1) e.statusText = '进行中';
					if (e.status == 2) e.statusText = '已结束';
					e.image = BASE_URL.fileUrl + e.image;
					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/activity/details?activityId=${e.activityId}` })
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.query();
			}
		}
	}
</script>

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