优化全局下拉刷新

2026-08-20 15:41:27 +08:00
parent 325813c67e
commit ec66ed3076
19 changed files with 258 additions and 338 deletions
--- a/property-uniapp-project/pageSubPack/my/myCarIndex.vue
+++ b/property-uniapp-project/pageSubPack/my/myCarIndex.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="contentStyle" style="">

-		<scroll-view class="page" scroll-y="true" @scrolltolower="getList" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
+		<view class="page">
 			<view v-if="carList.length === 0" class="empty-state">
 				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
 				<text class="empty-text">暂无数据</text>
@@ -22,7 +22,7 @@
 					{{ item.certificationStatus }}
 				</view> -->
 			</view>
-		</scroll-view>
+		</view>
 		<view class="bottom-btn">
 			<button class="confirm-btn" @click="addCar">添加车辆</button>
 		</view>
@@ -38,27 +38,27 @@
 		getMyCarList
 	} from '@/pageSubPack/api/apiSub.js'
 	import {
-		onShow
+		onShow,
+		onPullDownRefresh,
+		onReachBottom
 	} from '@dcloudio/uni-app'
 	const statusBarHeight = ref(20)
 	const defaultCarImg = "http://47.104.199.163:9090/images/propertyImgs/defaultCarImg.png"
 	const carList = ref([])
 	const loadingMore = ref(false)
 	const noMoreData = ref(false)
-	const isRefreshing = ref(false)

 	const pageNum = ref(1)
 	const pageSize = ref(10)

 	// ==================== 下拉刷新 ====================
-	const onRefresh = () => {
-		isRefreshing.value = true
+	onPullDownRefresh(() => {
 		pageNum.value = 1
 		noMoreData.value = false
 		carList.value = []
 		loadingMore.value = false
 		getList()
-	}
+	})

 	// 页面加载时请求第一页
 		onMounted(() => {
@@ -107,14 +107,16 @@
 			console.error('列表接口报错：', err)
 		} finally {
 			loadingMore.value = false
-			// 关闭 refresher 下拉刷新状态
-			if (isRefreshing.value) {
-				isRefreshing.value = false
-			}
+			uni.stopPullDownRefresh()
 		}
 	}


+	// ==================== 上拉加载更多 ====================
+	onReachBottom(() => {
+		getList()
+	})
+
 	const getStatusText = (status) => {
 		if (status === 0) return '未绑定'
 		if (status === 1) return '已绑定'
@@ -144,24 +146,16 @@
 <style lang="scss">
 	page {
 		background: #F3F8FD;
-		overflow: hidden;
 	}
 </style>

 <style scoped>
 	.contentStyle {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-		overflow: hidden;
+		min-height: 100vh;
 		background-color: #f5f7fa;
 	}

 	.page {
-		flex: 1;
-		min-height: 0;
-		height: 0;
-		overflow-y: auto;
 		padding: 0px 40rpx 140rpx;
 		box-sizing: border-box;
 	}
--- a/property-uniapp-project/pageSubPack/my/myHouseIndex.vue
+++ b/property-uniapp-project/pageSubPack/my/myHouseIndex.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="contentStyle" style="">

-		<scroll-view class="page" scroll-y :refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
+		<view class="page">
 			<!-- 空状态 -->
 			<view v-if="houseList.length === 0" class="empty-state">
 				<uni-icons type="info" size="30" color="#ccc"></uni-icons>
@@ -46,7 +46,7 @@
 					</view>
 				</view>
 			</view>
-	</scroll-view>
+	</view>
 		<!-- 底部添加按钮 -->
 		<view class="bottom-btn">
 			<button class="add-btn" @click="addHouse">添加房屋</button>
@@ -62,7 +62,9 @@
 		onMounted,
 	} from 'vue'
 	import {
-		onShow
+		onShow,
+		onPullDownRefresh,
+		onReachBottom
 	} from '@dcloudio/uni-app'
 	import {
 		getMyHouseList,
@@ -74,17 +76,15 @@
 	const pageNum = ref(1)
 	const pageSize = ref(10)
 	const noMoreData = ref(false)
-	const isRefreshing = ref(false)

-		// ==================== 下拉刷新 ====================
-	const onRefresh = () => {
-		isRefreshing.value = true
+	// ==================== 下拉刷新 ====================
+	onPullDownRefresh(() => {
 		pageNum.value = 1
 		noMoreData.value = false
 		houseList.value = []
 		loading.value = false
 		getList()
-	}
+	})

 	// ==================== 获取列表数据 ====================
 	const getList = async () => {
@@ -113,8 +113,7 @@
 			console.error('列表接口报错：', err)
 		} finally {
 			loading.value = false
-			isRefreshing.value = false
-				uni.stopPullDownRefresh()
+			uni.stopPullDownRefresh()
 		}
 	}

@@ -125,6 +124,11 @@
 		getList()
 	}

+	// ==================== 上拉加载更多 ====================
+	onReachBottom(() => {
+		loadMore()
+	})
+
 	// 页面加载时请求第一页
 	onMounted(() => {
 		pageNum.value = 1
@@ -211,16 +215,11 @@

 <style scoped>
 	.contentStyle {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-		/* 关键：固定高度，底部按钮不动 */
+		min-height: 100vh;
 		background-color: #f5f7fa;
 	}

 	.page {
-		flex: 1;
-		overflow-y: auto;
 		padding: 0px 40rpx 120rpx;
 		box-sizing: border-box;
 	}
--- a/property-uniapp-project/pageSubPack/my/myParkingSpaceIndex.vue
+++ b/property-uniapp-project/pageSubPack/my/myParkingSpaceIndex.vue
@@ -3,7 +3,7 @@
 		<!-- <view class="status-bar"></view>
 		<uni-nav-bar title="我的车位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar> -->
-		<scroll-view class="page" scroll-y="true" @scrolltolower="getList" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
+		<view class="page">
 			<view v-if="parkingSpaceList.length === 0" class="empty-state">
 				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
 				<text class="empty-text">暂无数据</text>
@@ -54,7 +54,7 @@
 					</view>
 				</view>
 			</view>
-		</scroll-view>
+		</view>
 		<view class="bottom-btn">
 			<button class="add-btn" @click="addParkingSpace">添加车位</button>
 		</view>
@@ -66,7 +66,9 @@
 		ref
 	} from 'vue'
 	import {
-		onShow
+		onShow,
+		onPullDownRefresh,
+		onReachBottom
 	} from '@dcloudio/uni-app'
 	import {
 		getCarList
@@ -76,14 +78,13 @@
 	const parkingSpaceList = ref([])

 	// ==================== 下拉刷新 ====================
-	const onRefresh = () => {
-		isRefreshing.value = true
+	onPullDownRefresh(() => {
 		pageNum.value = 1
 		noMoreData.value = false
 		parkingSpaceList.value = []
 		loadingMore.value = false
 		getList()
-	}
+	})

 	// 页面显示时请求第一页（首次进入和从详情/修改页返回时都会刷新）
 	onShow(() => {
@@ -96,7 +97,6 @@

 	const loadingMore = ref(false)
 	const noMoreData = ref(false)
-	const isRefreshing = ref(false)

 	const pageNum = ref(1)
 	const pageSize = ref(10)
@@ -148,13 +148,15 @@
 			console.error('列表接口报错：', err)
 		} finally {
 			loadingMore.value = false
-			// 关闭 refresher 下拉刷新状态
-			if (isRefreshing.value) {
-				isRefreshing.value = false
-			}
+			uni.stopPullDownRefresh()
 		}
 	}

+	// ==================== 上拉加载更多 ====================
+	onReachBottom(() => {
+		getList()
+	})
+
 	const tapParkingSpace = (item) => {
 		console.log(item);
 		uni.navigateTo({
@@ -187,15 +189,11 @@
 	}

 	.contentStyle {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
+		min-height: 100vh;
 		background-color: #f5f7fa;
 	}

 	.page {
-		flex: 1;
-		overflow-y: auto;
 		padding: 0px 40rpx 140rpx;
 		box-sizing: border-box;
 	}