优化全局下拉刷新

property-uniapp-project/pageSubPack/notice-list/noticeList.vue

@@ -1,30 +1,7 @@
 <template>
   <view class="page">
-	  <view class="status_bar"></view>
-    <!-- 固定导航栏 -->
-    <uni-nav-bar
-      left-icon="left"
-      title="通知公告"
-      background-color="#F9F9F9"
-      @clickLeft="narBack"
-    />
-
-    <!-- 滚动区域 -->
-    <scroll-view
-      scroll-y
-      class="scroll-box"
-      :refresher-enabled="true"
-      :refresher-triggered="refreshing"
-      @refresherrefresh="onRefresh"
-      @scrolltolower="loadMore"
-    >
-      <view class="list-wrap">
-        <!-- 下拉刷新 -->
-        <view class="refresh" v-if="refreshing">
-          <uni-icons type="spinner-cycle" class="spin"/> 刷新中...
-        </view>
-
-        <!-- 列表 -->
+    <!-- 列表 -->
+    <view class="list-wrap">
         <view
           v-for="notice in noticeList"
           :key="notice.noticeId"
@@ -48,18 +25,16 @@
 			<uni-icons type="info" size="30" color="#ccc"></uni-icons>
 			<text class="empty-text">暂无通知</text>
 		</view>
-      </view>
-    </scroll-view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { onLoad ,onShow,onUnload} from '@dcloudio/uni-app'
+import { onLoad, onShow, onUnload, onBackPress, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 import { getNoticeList } from '../api/api.js'
 
 const noticeList = ref([])
-const refreshing = ref(false)
 const loadingMore = ref(false)
 const noMoreData = ref(false)
 const loading = ref(false)
@@ -90,8 +65,8 @@ const loadNotices = async (isRefresh = false) => {
   } catch (e) {}
   finally {
     loading.value = false
-    refreshing.value = false
     loadingMore.value = false
+    uni.stopPullDownRefresh()
   }
 }
   // 更新单条已读状态
@@ -107,10 +82,13 @@ onShow(() =>{
 	loadNotices(true)
 })
 
-const onRefresh = () => {
-  refreshing.value = true
+onPullDownRefresh(() => {
   loadNotices(true)
-}
+})
+
+onReachBottom(() => {
+  loadMore()
+})
 
 const loadMore = () => {
   if (noMoreData.value || loadingMore.value) return
@@ -119,12 +97,18 @@ const loadMore = () => {
   loadNotices()
 }
 
-const narBack = () => {
+onBackPress(() => {
   const page = uni.getStorageSync('sourcePage')
-  if (page === 'index') uni.switchTab({ url: '/pages/index/index' })
-  if (page === 'serviceIndex') uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
   uni.removeStorageSync('sourcePage')
-}
+  if (page === 'index') {
+    uni.switchTab({ url: '/pages/index/index' })
+    return true
+  }
+  if (page === 'serviceIndex') {
+    uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
+    return true
+  }
+})
 
 onLoad(() => {
 	isFirstShow.value = false
@@ -140,23 +124,6 @@ onUnload(()=>{
 page {
   background: #f9f9f9;
 }
-.page {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-}
-.status_bar {
-	height: 46px;
-	width: 100%;
-}
-.scroll-box {
-  flex: 1;
-  height: 0; /* 让滚动区域生效 */
-}
 .list-wrap {
   padding: 40rpx;
 }
@@ -217,7 +184,7 @@ page {
   justify-content: space-between;
   align-items: center;
 }
-.refresh, .load-more, .no-more {
+.load-more, .no-more {
   text-align: center;
   padding: 20rpx;
   color: #999;
@@ -245,11 +212,4 @@ page {
   padding: 10rpx 30rpx;
   margin-top: 20rpx;
 }
-.spin {
-  animation: rotate 1s linear infinite;
-}
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
 </style>