exam_mp/pages/notice/list.vue

<template>
	<Container title="公告列表" :scrollStyle="{ padding: 0 }">
		<view ref="loadMoreTrigger" class="notice-page">
			<!-- 公告列表 -->
			<view class="notice-list" v-if="noticeList !='' && noticeList != null">
				<!-- 公告项1 -->
				<view class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="handleItemClick(item)">
					<navigator class="navigator_item" open-type="navigate" :url="'/pages/notice/detail?id=' + item.id">
					<view class="notice-icon">
						<image
							class="notice-icon-image"
							src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/8DvVCq6w7CN97Mxdp68vje9WCi8RjKXDC5KwHOOY.png"
							mode="aspectFill"
						></image>
					</view>
					<view class="notice-content" :id="'content-' + index">
						<view class="notice-title">{{ item.title }}</view>
						<view class="notice-time">{{ formatTimestamp(item.insert_time)}}</view>
					</view>
					
						<view class="notice-link">
							<image
								class="notice-link-image"
								src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/jYNQJdKYavtqeVoq7bxwYFuF258jFm3sNWVSX1SS.png"
								mode="aspectFill"
							></image>
						</view>
					</navigator>
				</view>
			</view>
			<!-- 加载状态提示 -->
			<view class="loading-status">
				<text v-if="loading">加载中...</text>
				<text v-if="noMore">——已经到底了——</text>
			</view>
		</view>
	</Container>
</template>

<script>
import Container from '../../components/Container/Container.vue';
import CustomerService from '@/components/CustomerService/CustomerService.vue';
export default {
	data() {
		return {
			page: 1,
			limit: 10,
			noticeLink_top: [],
			noticeList: [],
			loading: false, // 是否正在加载
			noMore: false, // 是否没有更多数据
			observer: null
		};
	},
	onReady() {
	  // this.handleScroll();
	},
	onLoad() {
		this.handleScroll();
	},
	methods: {
		handleScroll() {
		  // 先销毁之前的观察器
		  if (this.observer) {
			this.observer.disconnect();
			this.observer = null;
		  }
		  // 创建新的观察器
		  this.observer = uni.createIntersectionObserver(this);
		  this.observer.relativeToViewport({
			bottom: 50 // 调整为更小的阈值，提高触发灵敏度
		  }).observe('.loading-status', (res) => {
			if (res.intersectionRatio > 0 && !this.loading && !this.noMore) {
			  this.loading = true; // 添加加载状态
			  this.notice_system_list().finally(() => {
				this.loading = false;
			  });
			  this.page++;
			}
		  });
		},
		formatTimestamp(timestamp) {
			if (timestamp) {
				timestamp = timestamp * 1000;
			}
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，要 +1
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		async notice_system_list() {
			this.$http.request('api/question_bank/question_reception/notice/list', { page: this.page, limit: this.limit }).then((callback) => {
				if (callback.code == 'success') {
					let page = this.page;
					if (page == 1) {
						this.noticeList = callback.data.data;
					} else {
						this.noticeList.push(...callback.data.data);
					}
					if (callback.data.data == '') {
						this.noMore = true;
					} else {
						this.noMore = false;
					}
				} else {
					uni.showToast({
						title: callback.msg,
						icon: 'none'
					});
				}
			});
		},
		handleItemClick(item) {
			// 处理点击事件
			console.log('点击公告:');
		}
	}
};
</script>

<style lang="scss">
.notice-page {
	background-color: #f5f5f5;
	min-height: 100vh;

	.notice-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		.navigator_item{
			display: flex;
			width: 100%;
		}
		.notice-item {
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #eee;
			position: relative;
			.notice-icon {
				position: absolute;
				top: 22rpx;
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}

			.notice-link {
				position: absolute;
				right: 0rpx;
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
				top:calc((100% - 50rpx)/2)
			}

			.notice-link-image,
			.notice-icon-image {
				width: 50rpx;
				height: 50rpx;
			}

			.notice-content {
				flex: 1;
				margin-left: 60rpx;
				margin-right: 60rpx;

				.notice-title {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 10rpx;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.notice-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
.loading-status {
	text-align: center;
	color: #999;
	padding: 120rpx 0rpx;
	font-size: 24rpx;
}
</style>