优化全局下拉刷新

property-uniapp-project/pageSubPack/activity-list/activityList.vue

@@ -1,15 +1,8 @@
 <template>
 	<view class="container">
-		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-		<!-- 顶部标题栏 固定 -->
-		<view class="top-bar">
-			<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false" :statusBar="false"
-				@clickLeft="narBack" />
-		</view>
 
 		<!-- 滚动区域：从banner开始滚动 -->
-		<scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
-			:lower-threshold="100">
+		<view class="scroll-container">
 			<!-- 顶部图片 -->
 			<view class="top-img">
 				<image class="banner-img" src="http://47.104.199.163:9090/images/home/banner.png" mode="aspectFill"></image>
@@ -121,13 +114,13 @@
 					</view>
 				</view>
 			</view>
-		</scroll-view>
+		</view>
 	</view>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
+import { onLoad, onUnload, onShow, onPullDownRefresh, onReachBottom, onBackPress } from '@dcloudio/uni-app'
 import moment from 'moment';
 import { getActivityList,getMyActivityList} from '../api/api.js'
 
@@ -140,7 +133,6 @@ const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const displayedActivities = ref([]) // 当前显示的活动列表
-const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
 
 // 筛选条件：status ''全部, '0'未开始, '1'进行中, '2'已结束
 const filters = ref([
@@ -161,19 +153,17 @@ const resetAndLoad = () => {
 	getActivityListData(1)
 }
 
-/**
- * 返回上一级页面
- */
-const narBack = () => {
+// 页面返回拦截：根据来源页返回对应 tab，否则走默认返回
+onBackPress(() => {
 	const sourcePage = uni.getStorageSync('sourcePage')
 	if (sourcePage === "index") {
 		uni.switchTab({ url: "/pages/index/index" })
+		return true
 	} else if (sourcePage === "serviceIndex") {
 		uni.switchTab({ url: "/pages/serviceIndex/serviceIndex" })
-	} else {
-		uni.navigateBack()
+		return true
 	}
-}
+})
 
 /**
  * 切换选项卡（活动列表/我的活动）
@@ -249,6 +239,7 @@ const getActivityListData = async (pageNum = 1) => {
 		if (pageNum === 1) displayedActivities.value = []
 	} finally {
 		isLoading.value = false
+		uni.stopPullDownRefresh();
 	}
 }
 
@@ -294,6 +285,7 @@ const getMyActivityListData = async (pageNum = 1) => {
 		if (pageNum === 1) displayedActivities.value = []
 	} finally {
 		isLoading.value = false
+		uni.stopPullDownRefresh();
 	}
 }
 
@@ -407,7 +399,21 @@ onLoad(() => {
  */
 onUnload(() => {
 	uni.$off('refreshActivityList')
-})
+});
+
+// 下拉刷新
+onPullDownRefresh(() => {
+	if (activeTab.value === 'list') {
+		resetAndLoad();
+	} else {
+		resetAndLoadMy();
+	}
+});
+
+// 上拉加载更多
+onReachBottom(() => {
+	loadMoreData();
+});
 
 /**
  * 监听我的活动筛选条件变化
@@ -423,33 +429,14 @@ watch(() => myFilter.value, () => {
 /* 页面容器 */
 .container {
 	width: 100%;
-	height: 100vh;
+	min-height: 100vh;
 	background-color: #fff;
-	display: flex;
-	flex-direction: column;
 	padding: 0;
 }
 
-/* 状态栏 - 自适应设备状态栏高度 */
-.status-bar {
-	/* height: var(--status-bar-height); */
-	/* height: 46px; */
-	width: 100%;
-	flex-shrink: 0;
-}
-
-/* 顶部标题 固定 */
-.top-bar {
-	width: 100%;
-	flex-shrink: 0;
-	background: #fff;
-}
-
 /* 滚动区域 */
 .scroll-container {
-	flex: 1;
 	width: 100%;
-	overflow-y: auto;
 	padding: 0 30rpx;
 	box-sizing: border-box;
 }