选择类分页优化

pages_home/pages/client/details.vue

@@ -1,37 +1,10 @@
 <template>
-	<view style="padding-top: 20rpx; width: 100vw; height: 100vh; overflow: hidden">
-		<view style="width: 100%; height: 100%; overflow:scroll">
-			<!-- <view class="Wrapper">
-				<image src="/static/img/Location.png" class="Wrapper-img" />
-				<span class="Wrapper-content">重庆</span>
-				<vie class="input-container">
-					<up-input v-model="value" @click.native="goToDetail" placeholder="请输入内容" prefixIcon="search"
-						:customStyle="inputStyle"></up-input>
-				</vie>
-			</view> -->
+	<view class="main-content">
+		<view class="content-box">
 			<view class="tabs-container">
-				<!-- <view class="tabs-wrapper">
-					<scroll-view scroll-x class="tabs-scroll">
-						<up-tabs :list="list1" @change="handlTabs" keyName="businessName"
-							class="tabs-content" :current="tabKey"></up-tabs>
-					</scroll-view>
-				</view>
-
-				<view  class="custom-dropdown">
-					<up-tabs :list="list2" @change="clickList2" class="tabs-content" :current="currentTabs2"
-						keyName="businessName" />
-				</view>
-				<view class="tabs-wrapper">
-					<scroll-view scroll-x class="tabs-scroll">
-						<up-tabs :list="list1" @change="handlTabs" keyName="businessName"
-							class="tabs-content" :current="tabKey"></up-tabs>
-					</scroll-view>
-				</view> -->
-
 				<Tabs :list="list1" @change="handlTabs" ref="tabRef" />
 			</view>
 
-
 			<!-- 瀑布流 -->
 			<view v-if="userType == '1'">
 				<up-waterfall v-model="flowList" v-if="pages.total >0">
@@ -51,7 +24,6 @@
 									<image :src="item.volunteerPicture" class="name-image"></image>
 									{{item.name}}
 								</view>
-
 							</view>
 						</view>
 					</template>
@@ -71,7 +43,6 @@
 									<image :src="item.volunteerPicture" class="name-image"></image>
 									{{item.name}}
 								</view>
-
 							</view>
 						</view>
 					</template>
@@ -84,10 +55,8 @@
 				:loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
 				:nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore"
 				v-if="userType == 1 && pages.total >0" />
-
 		</view>
 	</view>
-
 </template>
 
 <script setup>
@@ -151,6 +120,10 @@
 		clearList();
 		serviceCategory.value = record.parentId;
 		businessManagementId.value = record.id;
+		// 重置分页状态
+		pages.value.current = 1;
+		pages.value.total = 0;
+		loadmoreInfo.value.status = 'loadmore';
 		getList();
 	}
 
@@ -228,6 +201,12 @@
 		try {
 			loadmoreInfo.value.status = 'loading';
 
+			// 检查 businessManagementId 是否存在
+			if (!businessManagementId.value) {
+				console.log('No businessManagementId selected');
+				return;
+			}
+
 			// 请求时传递分页参数
 			const res = await volunteerinfolist({
 				pageNum: pages.value.current, // 当前页码
@@ -235,14 +214,19 @@
 				businessManagementId: businessManagementId.value
 			});
 
-			console.log(res, '>>>>>>>res');
-
 			if (!res || !res.rows) {
 				return;
 			}
+
+			// 如果是第一页，先清空
+			if (pages.value.current === 1) {
+				leftList.value = [];
+				rightList.value = [];
+			}
+
 			// 将数据分成左右两列
 			res.rows.forEach((item, index) => {
-				index % 2 !== 0 ?rightList.value.push(item) : leftList.value.push(item) ;
+				index % 2 !== 0 ? rightList.value.push(item) : leftList.value.push(item);
 			});
 			pages.value.total = res.total;
 
@@ -252,10 +236,8 @@
 			} else {
 				loadmoreInfo.value.status = 'loadmore';
 			}
-
-			
 		} catch (error) {
-			clearList()
+			clearList();
 			console.error('Error fetching data:', error);
 		}
 	};
@@ -268,9 +250,9 @@
 	}
 
 	onReachBottom(() => {
-		if (loadmoreInfo.value.status !== 'nomore') { // 更宽松的条件
-			loadmoreInfo.value.status = 'loading';
+		if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
 			pages.value.current += 1;
+			loadmoreInfo.value.status = 'loading';
 			getList();
 		}
 	})
@@ -278,11 +260,28 @@
 
 
 	onMounted(() => {
-		// getList()
+		// 如果有默认选中的 tab，则初始化数据
+		if (list1.value.length > 0) {
+			const defaultTab = list1.value[0];
+			businessManagementId.value = defaultTab.id;
+			getList();
+		}
 	})
 </script>
 
 <style scoped>
+.main-content {
+	width: 100%;
+	height: 100vh;
+	background: #fff;
+}
+
+.content-box {
+	width: 100%;
+	height: 100%;
+	padding-bottom: 40rpx;
+}
+
 	.Wrapper {
 		display: flex;
 		align-items: center;