优化全局下拉刷新

property-uniapp-project/pages/index/index.vue

@@ -6,9 +6,11 @@
 		</view>
 		
 
+		<!-- 顶部渐变背景（固定在内容下方） -->
+		<view class="nar-top" v-if="pageReady"></view>
+
 		<!-- 固定头部 -->
 		<view class="header-fixed" v-if="pageReady">
-			<view class="nar-top"></view>
 			<view class="status-bar"></view>
 			<view class="header-content">
 				<!-- 小区选择 -->
@@ -29,11 +31,9 @@
 		</view>
 
 		<!-- 滚动内容区 -->
-		<pull-refresh-scroll
-			custom-class="main-scroll"
-			v-if="pageReady"
-			:refreshing="refreshing"
-			@refresh="onRefresh">
+		<view
+			class="main-scroll"
+			v-if="pageReady">
 			<!-- banner -->
 			<view class="bannarClass">
 				<up-swiper :key="bannerSwiperKey" :list="bannerList" indicator indicatorMode="dot" radius="10" circular>
@@ -138,7 +138,7 @@
 
 			<!-- 底部占位 -->
 			<view class="scroll-bottom-space"></view>
-		</pull-refresh-scroll>
+		</view>
 	</view>
 </template>
 
@@ -150,7 +150,8 @@
 	import {
 		onLoad,
 		onUnload,
-		onShow
+		onShow,
+		onPullDownRefresh
 	} from '@dcloudio/uni-app'
 	import moment from 'moment'
 	import {
@@ -165,7 +166,6 @@
 
 	// 列表数据状态
 	const isDropdownOpen = ref(false)
-		const refreshing = ref(false)
 	const activityList = ref([])
 
 		const serviceItems = [
@@ -354,16 +354,12 @@
 		getNoticeData()
 		getNewActivityList()
 		getbannarData()
-		refreshing.value = false
+		uni.stopPullDownRefresh()
 	}
 
-		const onRefresh = async () => {
-			refreshing.value = true
-			await nextTick()
-			await refreshAllData()
-			await nextTick()
-			refreshing.value = false
-		}
+		onPullDownRefresh(() => {
+			refreshAllData()
+		})
 
 	const resetPageData = () => {
 		currentCommunity.value = '请绑定房屋'
@@ -381,7 +377,6 @@
 		const currentUserId = uni.getStorageSync('userId') || ''
 		const userIdChanged = lastUserId.value !== currentUserId
 		const needReload = uni.getStorageSync('needReloadUserInfo')
-		refreshing.value = false
 		if (userIdChanged) {
 			resetPageData()
 			refreshAllData()
@@ -477,13 +472,7 @@
 <style lang="scss" scoped>
 	.content-class {
 		background-color: #f9f9f9;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		flex-direction: column;
+		min-height: 100vh;
 
 		/* 加载遮罩 */
 		.loading-mask {
@@ -501,20 +490,23 @@
 			background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB);
 		}
 
+		/* 顶部渐变背景（固定在内容下方） */
+		.nar-top {
+			height: 400rpx;
+			width: 100%;
+			background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB);
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+
 		/* 固定头部 */
 		.header-fixed {
-			position: relative;
-			flex-shrink: 0;
-
-			.nar-top {
-				height: 400rpx;
-				width: 100%;
-				background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB);
-				position: absolute;
-				top: 0;
-				left: 0;
-				z-index: 0;
-			}
+			position: sticky;
+			top: 0;
+			z-index: 10;
+			background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB);
 
 			.status-bar {
 				height: var(--status-bar-height);
@@ -530,9 +522,6 @@
 
 		/* 滚动区域 */
 		.main-scroll {
-			flex: 1;
-			min-height: 0;
-			overflow: hidden;
 			position: relative;
 			z-index: 1;
 		}