Sfoglia il codice sorgente

工分排名详情防抖动

ouyj 3 mesi fa
parent
commit
fe97b21d43
1 ha cambiato i file con 50 aggiunte e 1 eliminazioni
  1. 50 1
      pages/score/ranking.uvue

+ 50 - 1
pages/score/ranking.uvue

@@ -40,6 +40,11 @@ import { selectHomePageData } from '@/api/index/index'
 const loading = ref<boolean>(false)
 const refreshing = ref<boolean>(false)
 
+// 添加防重复刷新的标志
+const isRefreshing = ref<boolean>(false)
+// 添加刷新时间戳,用于防抖
+const lastRefreshTime = ref<number>(0)
+
 // 排名类型 (dept, center, company)
 const rankingType = ref<string>('')
 const rankingTypeName = ref<string>('')
@@ -118,9 +123,16 @@ const loadRankingData = async (): Promise<void> => {
 		}
 	} catch (error) {
 		console.error('获取排名数据失败:', error)
+		// 出错时也需要重置刷新状态
+		if (refreshing.value) {
+			refreshing.value = false;
+			isRefreshing.value = false;
+		}
 	} finally {
 		loading.value = false
 		refreshing.value = false
+		// 确保在finally中也重置isRefreshing标志
+		isRefreshing.value = false
 	}
 }
 
@@ -143,7 +155,36 @@ const getPositionClass = (index: number): string => {
 
 // 下拉刷新
 const handleRefresh = (): void => {
-	loadRankingData()
+  console.log("handleRefresh被触发")
+  console.log("loading.value===" + loading.value)
+  console.log("isRefreshing.value===" + isRefreshing.value)
+
+  // 防抖处理,避免频繁触发
+  const now = Date.now();
+  if (now - lastRefreshTime.value < 1000) {
+    console.log("刷新操作过于频繁,忽略本次触发");
+    refreshing.value = false;
+    return;
+  }
+  lastRefreshTime.value = now;
+
+  // 添加防重复调用检查
+  if (loading.value || isRefreshing.value) {
+    // 如果已经在加载或正在刷新,直接重置刷新状态
+    refreshing.value = false;
+    return;
+  }
+  console.log("loading.value1===" + loading.value)
+  console.log("isRefreshing.value1===" + isRefreshing.value)
+  // 设置刷新标志
+  isRefreshing.value = true;
+
+  loadRankingData(); // 使用默认的下拉刷新行为
+
+  // 确保在一定时间后重置刷新标志,防止意外情况
+  setTimeout(() => {
+    isRefreshing.value = false
+  }, 100) // 延迟重置,确保状态完全更新
 }
 
 // 页面加载时获取参数
@@ -167,6 +208,14 @@ onLoad((options: UTSJSONObject | null) => {
 		loadRankingData()
 	}
 })
+
+// 组件销毁时清除状态
+onUnload(() => {
+  // 如果组件销毁前还有未完成的刷新操作,确保状态被重置
+  loading.value = false;
+  refreshing.value = false;
+  isRefreshing.value = false;
+})
 </script>
 
 <style lang="scss">