subject_gxj/xj_project_app/pages/announcement/list/index.vue

<template>
	<view class="container">
		<page-title>公告列表</page-title>

		<view class="cards-list">
			<view class="card" v-for="(item,index) in announcementList" :key="index">
				<card-title :numerator="index + 1" :denominator="total"></card-title>

				<!-- 标题 -->
				<view class="card-item">
					<view class="card-item-announcement">{{item.title || "--"}}</view>
				</view>

				<!-- 发布时间 -->
				<view class="card-item">
					<view class="card-item-name">发布时间: {{item.publishDate || "--"}}</view>
				</view>

				<!-- 按钮 -->
				<view class="card-item">
					<view class="card-btn fat-btn" @click="goToPage(item.id)">查看详情</view>
				</view>

			</view>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app"

	import {
		getannouncementList,
	} from "@/api/home.js"

	let scrollTop = ref(0)

	let announcementList = ref([])
	let total = ref(0)

	let pageForm = {
		pageNo: 1,
		pageSize: 10,
	}

	// 触底加载flag
	let moreListFlag = true

	function getList() {
		getannouncementList(pageForm).then(res => {
			announcementList.value = announcementList.value.concat(res.data.list);
			total.value = res.data.totalCount;

			if (res.data.total == searchInfo.value.pageNo*searchInfo.value.pageSize-(10 - res.data.list.length)) moreListFlag = false;
		})
	}

	function goToPage(id) {
		uni.navigateTo({
			url: `/pages/announcement/index?id=${id}`
		})
	}

	onLoad(() => {
		getList()
	})

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	onPullDownRefresh(() => {
		pageForm.pageNo = 1;
		announcementList.value = [];
		moreListFlag = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	})
</script>

<style lang="scss" scoped>
</style>