修改微信小程序的空白区域

pages-subpackage/customer/components/CustomerList.vue

@@ -1,5 +1,8 @@
 <template>
-	<view class="customer-list-container">
+	<scroll-view 
+		class="customer-list-container customer-list" 
+		:style="{ top: contentTop || '160rpx' }"
+		scroll-y>
 		<view class="service-status-toolbar">
 			<text class="toolbar-total">共{{ list.length }}条</text>
 			<input
@@ -27,7 +30,6 @@
 				</view>
 			</view>
 		</view>
-		<scroll-view class="customer-list" scroll-y>
 			<view 
 				class="customer-card" 
 				v-for="(item, index) in list" 
@@ -56,8 +58,7 @@
 					<text class="customer-budget" v-if="item.budget">{{ item.budget }}</text>
 				</view>
 			</view>
-		</scroll-view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
@@ -67,6 +68,10 @@
 			list: {
 				type: Array,
 				default: () => []
+			},
+			contentTop: {
+				type: String,
+				default: '160rpx'
 			}
 		},
 		data() {
@@ -93,16 +98,21 @@
 <style scoped>
 	.customer-list-container {
 		/* 使用绝对定位，从tab页底部开始，到底部导航栏结束 */
+		/* 直接让 scroll-view 作为绝对定位容器，与标签管理页面保持一致 */
 		position: absolute;
-		top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */
+		/* top值通过内联样式动态设置 */
 		left: 0;
 		right: 0;
-		bottom: 96rpx; /* 底部导航栏高度 */
-		display: flex;
-		flex-direction: column;
 		background-color: #F5F5F5;
-		padding: 24rpx 16rpx;
+		padding: 24rpx 16rpx 0 16rpx;
 		box-sizing: border-box;
+		/* #ifndef MP-WEIXIN */
+		bottom: 96rpx; /* H5环境：底部导航栏高度 */
+		/* #endif */
+		/* #ifdef MP-WEIXIN */
+		/* 微信小程序：底部导航栏是 fixed 定位，不占用文档流，容器可以延伸到视口底部 */
+		bottom: 0 !important;
+		/* #endif */
 	}
 	
 	.service-status-toolbar {
@@ -173,13 +183,7 @@
 		color: #2A68FF;
 	}
 	
-	.customer-list {
-		/* 使用flex填充剩余空间 */
-		flex: 1;
-		background-color: transparent;
-		box-sizing: border-box;
-		overflow-y: auto;
-	}
+	/* .customer-list 现在与 .customer-list-container 是同一个元素，不需要单独样式 */
 	
 	.customer-card {
 		width: 100%;