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="load-tip" v-if="loading">
				<text>加载中...</text>
			</view>
			<view class="load-tip" v-if="noMore">
				<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: {
		/**
		 * 模拟请求活动列表接口
		 * @param {Number} page 页码
		 * @param {Number} pageSize 每页条数
		 */
		getActivityList() {
			this.loading = true;

			// 模拟网络请求延迟
			setTimeout(() => {
				// 生成模拟数据
				const list = this.mockData(this.page, this.pageSize);

				// 下拉刷新：直接替换数据
				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;
			}, 1000);
		},

		/**
		 * 模拟生成活动数据
		 */
		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, // 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%;
}

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