[捉药师] 添加公告分页加载，详情上一篇，下一篇功能

pages/notice/detail.vue

@@ -2,11 +2,11 @@
 	<Container title="公告列表" :scrollStyle="{ padding: 0 }">
 		<view class="notice-header">
 			<!-- 上一篇标题 -->
-			<view class="upper-title">{{ '< 上一篇' }}</view>
+			<view class="upper-title" @click="get_notice_detail_prev()">{{ '< 上一篇' }}</view>
 			<!-- 显示全部内容 -->
-			<view class="show-all-content">显示全部</view>
+			<view class="show-all-content" @click="goto_notice_list()">显示全部</view>
 			<!-- 下一篇标题 -->
-			<view class="next-title">{{ '下一篇 >' }}</view>
+			<view class="next-title" @click="get_notice_detail_next()">{{ '下一篇 >' }}</view>
 		</view>
 		<view class="notice-detail" v-if="notice_data !='' && notice_data !=null">
 			<!-- 公告标题 -->
@@ -40,6 +40,11 @@ export default {
 		this.get_notice_detail();
 	},
 	methods: {
+		goto_notice_list(){
+			uni.redirectTo({
+				url: 'list?refresh=' + Date.now()
+			});
+		},
 		formatTimestamp(timestamp) {
 			if (timestamp) {
 				timestamp = timestamp * 1000;
@@ -66,10 +71,34 @@ export default {
 				}
 			});
 		},
-		handleItemClick(item) {
-			// 处理点击事件
-			console.log('点击公告:');
-		}
+		async get_notice_detail_next() {
+			this.$http.request('api/question_bank/question_reception/notice/next', { id: this.notice_id}).then((callback) => {
+				if (callback.code == 'success') {
+					this.notice_data = callback.data;
+					this.htmlContent=callback.data.content;
+					this.notice_id=callback.data.id;
+				} else {
+					uni.showToast({
+						title: '没有更多内容了',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		async get_notice_detail_prev() {
+			this.$http.request('api/question_bank/question_reception/notice/prev', { id: this.notice_id}).then((callback) => {
+				if (callback.code == 'success') {
+					this.notice_data = callback.data;
+					this.htmlContent=callback.data.content;
+					this.notice_id=callback.data.id;
+				} else {
+					uni.showToast({
+						title: '没有更多内容了',
+						icon: 'none'
+					});
+				}
+			});
+		},
 	}
 };
 </script>

pages/notice/list.vue

@@ -1,6 +1,6 @@
 <template>
 	<Container title="公告列表" :scrollStyle="{ padding: 0 }">
-		<view class="notice-page">
+		<view ref="loadMoreTrigger" class="notice-page">
 			<!-- 公告列表 -->
 			<view class="notice-list" v-if="noticeList !='' && noticeList != null">
 				<!-- 公告项1 -->
@@ -27,6 +27,11 @@
 					</navigator>
 				</view>
 			</view>
+			<!-- 加载状态提示 -->
+			<view class="loading-status">
+				<text v-if="loading">加载中...</text>
+				<text v-if="noMore">——已经到底了——</text>
+			</view>
 		</view>
 	</Container>
 </template>
@@ -37,17 +42,31 @@ import CustomerService from '@/components/CustomerService/CustomerService.vue';
 export default {
 	data() {
 		return {
-			page: '1',
-			limit: '10',
+			page: 1,
+			limit: 10,
 			noticeLink_top: [],
-			noticeList: []
+			noticeList: [],
+			loading: false, // 是否正在加载
+			noMore: false, // 是否没有更多数据
+			observer: null
 		};
 	},
-	mounted() {},
+	onReady() {
+	  // this.handleScroll();
+	},
 	onLoad() {
-		this.topicnotice_system_list();
+		this.handleScroll();
 	},
 	methods: {
+	  handleScroll() {
+		const observer = uni.createIntersectionObserver(this);
+		observer.relativeToViewport({bottom: 100}).observe('.loading-status', (res) => {
+		  if (res.intersectionRatio > 0 && !this.loading && !this.noMore) {
+			this.notice_system_list();
+			this.page++;
+		  }
+		});
+	  },
 		formatTimestamp(timestamp) {
 			if (timestamp) {
 				timestamp = timestamp * 1000;
@@ -61,7 +80,7 @@ export default {
 			const seconds = String(date.getSeconds()).padStart(2, '0');
 			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 		},
-		async topicnotice_system_list() {
+		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;
@@ -157,4 +176,10 @@ export default {
 		}
 	}
 }
+.loading-status {
+	text-align: center;
+	color: #999;
+	padding: 120rpx 0rpx;
+	font-size: 24rpx;
+}
 </style>