1.

pages/sys/workbench/oa/oa.vue

@@ -23,7 +23,12 @@
 				v-show="idx === activeTab"
 				class="oa-list-scroll"
 				scroll-y
-				:refresher-enabled="false">
+				:scroll-top="scrollTop[idx]"
+				:refresher-enabled="true"
+				:refresher-triggered="refreshing[idx]"
+				@refresherrefresh="onRefresh"
+				@scrolltolower="onLoadMore"
+				@scroll="onScroll($event, idx)">
 				<view v-for="(item, index) in tabData[idx]" :key="index" class="oa-card"  @click="goToDetail(item)">
 					<view class="card-row">
 						<view class="card-type">{{ item.type }}</view>
@@ -46,6 +51,11 @@
 						<text class="card-datetime">{{ item.dateTime }}</text>
 					</view>
 				</view>
+				<!-- 加载更多提示 -->
+				<view class="loading-more">
+					<view v-if="loading && !refreshing[idx]" class="loading-text">加载中...</view>
+					<view v-else-if="!hasMore[idx] && tabData[idx].length > 0" class="loading-text">没有更多数据了</view>
+				</view>
 			</scroll-view>
 		</view>
 	</view>
@@ -63,7 +73,12 @@
 					[]  // 已发起
 				], 
 				tabLoaded: [false, false, false], // 每个tab是否已加载
-				loading: false
+				loading: false,
+				pageNum: [1, 1, 1], // 每个tab的页码
+				pageSize: 10, // 每页条数
+				hasMore: [true, true, true], // 每个tab是否还有更多数据
+				refreshing: [false, false, false], // 每个tab是否正在刷新
+				scrollTop: [0, 0, 0] // 每个tab的滚动位置
 			}
 		},
 		computed: {
@@ -93,6 +108,32 @@
 				}
 				*/
 			},
+			// 监听滚动事件，记录每个tab的滚动位置
+			onScroll(e, idx) {
+				this.scrollTop[idx] = e.detail.scrollTop;
+			},
+			// 下拉刷新
+			async onRefresh() {
+				// 设置当前tab为刷新状态
+				this.$set(this.refreshing, this.activeTab, true);
+				// 重置页码
+				this.$set(this.pageNum, this.activeTab, 1);
+				// 重新加载数据
+				await this.loadTabData(this.activeTab);
+				// 取消刷新状态
+				this.$set(this.refreshing, this.activeTab, false);
+			},
+			// 上拉加载更多
+			async onLoadMore() {
+				// 如果没有更多数据或正在加载，则不处理
+				if (!this.hasMore[this.activeTab] || this.loading) {
+					return;
+				}
+				// 页码加1
+				this.$set(this.pageNum, this.activeTab, this.pageNum[this.activeTab] + 1);
+				// 加载更多数据
+				await this.loadTabData(this.activeTab);
+			},
 			async loadTabData(idx) {
 				this.loading = true;
 				// 模拟接口请求，不同tab返回不同mock数据
@@ -227,9 +268,25 @@
 						}
 					];
 				}
+				
+				// 模拟分页效果
+				const start = (this.pageNum[idx] - 1) * this.pageSize;
+				const end = start + this.pageSize;
+				const pageData = data.slice(start, end);
+				
 				// 模拟网络延迟
 				await new Promise(res => setTimeout(res, 300));
-				this.$set(this.tabData, idx, data);
+				
+				if (this.pageNum[idx] === 1) {
+					// 刷新操作，替换数据
+					this.$set(this.tabData, idx, pageData);
+				} else {
+					// 加载更多，追加数据
+					this.tabData[idx] = [...this.tabData[idx], ...pageData];
+				}
+				
+				// 判断是否还有更多数据
+				this.$set(this.hasMore, idx, end < data.length);
 				this.$set(this.tabLoaded, idx, true);
 				this.loading = false;
 			},
@@ -334,6 +391,7 @@
 	.oa-list-container {
 		flex: 1;
 		position: relative;
+		margin-top: 20rpx;
 	}
 	
 	.oa-list-scroll {
@@ -344,8 +402,6 @@
 		bottom: 0;
 		padding: 0 35rpx;
 		overflow-y: auto;
-		padding-bottom: 50rpx;
-		height: calc(100vh - 80rpx - 32rpx - 150rpx); /* 减去顶部区域高度 */
 		box-sizing: border-box;
 	}
 
@@ -354,7 +410,6 @@
 		padding: 0 35rpx;
 		flex: 1;
 		overflow-y: auto;
-		padding-bottom: 50rpx;
 	}
 
 	.oa-card {
@@ -448,6 +503,16 @@
 		font-size: 24rpx;
 		color: #626262;
 	}
-
-
+	
+	.loading-more {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 20rpx 0;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999;
+	}
 </style>