library-wechat/subpkg/pages/activity-list/activity-list.vue

<template>
	<view class="activity-list">
		<!-- 下拉刷新区域 -->
		<scroll-view
			scroll-y
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
			lower-threshold="100"
		>

			<!-- 活动列表 -->
			<view class="activity-item" v-for="(item, index) in activityList" @click="toActivityDetail(item)" :key="index">
				<image class="activity-img" :src="item.imgUrl"></image>
				<view class="activity-info">
					<view class="activity-info-left">
						<text class="title">{{ item.title }}</text>
						<view class="time">
							<uni-icons class="time-icon" custom-prefix="iconfont" type="icon-shijian" size="15"></uni-icons>
							<text>{{ item.time }}</text>
						</view>
					</view>
					<button
						class="activity-btn"
						:class="item.status === 0 ? 'disabled-btn' : ''"
						type="primary"
						:disabled="item.status === 0"
					>
						{{ item.status === 1 ? '立即参加' : '活动结束' }}
					</button>
				</view>
			</view>

			<!-- 空状态：没有活动时显示 -->
			<view class="empty-box" v-if="activityList.length === 0 && !loading">
        <uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
				<text style="margin-top: 20px;">暂无活动，敬请期待~</text>
			</view>

			<!-- 加载提示 -->
			<view class="load-tip" v-if="loading">
				<text>加载中...</text>
			</view>
			<view class="load-tip" v-if="noMore && activityList.length > 0">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activityList: [], // 活动列表数据
			refreshing: false, // 下拉刷新状态
			loading: false, // 加载中
			noMore: false, // 是否没有更多数据
			page: 1, // 当前页码
			pageSize: 5, // 每页条数
			total: 20, // 模拟总数据量
		};
	},
	onLoad() {
		this.getActivityList();
	},
	methods: {
		getActivityList() {
			this.loading = true;

			setTimeout(() => {
				// 模拟接口没数据
				// const list = this.mockData(this.page, this.pageSize);
				const list = []; // 测试空状态

				if (this.refreshing) {
					this.activityList = list;
					this.refreshing = false;
				} else {
					this.activityList = [...this.activityList, ...list];
				}

				if (this.activityList.length >= this.total) {
					this.noMore = true;
				} else {
					this.noMore = false;
				}

				this.loading = false;
			}, 500);
		},

		mockData(page, pageSize) {
			let arr = [];
			for (let i = 0; i < pageSize; i++) {
				const num = (page - 1) * pageSize + i + 1;
				arr.push({
					imgUrl: "https://qiniu.aiyxlib.com/1605060269830",
					title: `活动标题${num}`,
					time: "2025-11-03 00:00 ~2025-11-09 00:00",
					status: num % 3 === 0 ? 0 : 1,
				});
			}
			return arr;
		},

		onRefresh() {
			this.page = 1;
			this.noMore = false;
			this.refreshing = true;
			this.getActivityList();
		},

		onLoadMore() {
			if (this.loading || this.noMore) return;
			this.page++;
			this.getActivityList();
		},

		toActivityDetail(item){
			uni.navigateTo({
				url: "/subpkg/pages/activity-detail/activity-detail?title=" + item.title
			});
		}
	},
};
</script>

<style lang="scss" scoped>
.activity-list {
	padding: 20px;
	height: 100vh;
	box-sizing: border-box;
}

scroll-view {
	height: 100%;
}

/* 空状态 */
.empty-box {
	display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 150rpx);
	color: #999;
	font-size: 15px;
}

.load-tip {
	text-align: center;
	padding: 20px;
	color: #999;
	font-size: 14px;
}

.activity-item {
	background: #fff;
	border-radius: 12px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

	.activity-img {
		width: 100%;
		height: 180rpx;
	}

	.activity-info {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.activity-info-left {
			flex: 1;

			.title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8px;
			}

			.time {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #999;

				.time-icon {
					margin-right: 4px;
				}
			}
		}

		.activity-btn {
			background-color: #01a4fe;
			font-size: 14px;
			border-radius: 30px;
			padding: 0 15px;
			height: 36px;
			line-height: 36px;
		}

		.disabled-btn {
			background-color: #ccc !important;
		}
	}
}
</style>