Răsfoiți Sursa

fix: 使用 ScrollView 原生 refresher 替代 usePullDownRefresh Hook

问题原因:
- ScrollView 组件会阻止页面级的 usePullDownRefresh Hook 触发
- 这是 Taro 框架在小程序端的已知限制

解决方案:
- 移除 usePullDownRefresh Hook
- 使用 ScrollView 原生的 refresher 功能:
  * refresherEnabled - 启用下拉刷新
  * refresherTriggered - 控制刷新动画状态
  * onRefresherRefresh - 刷新回调函数
  * refresherBackground - 刷新背景色

版本: 0.0.8

参考: https://github.com/NervJS/taro/issues/10624

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 3 săptămâni în urmă
părinte
comite
a844d4e540

+ 12 - 7
mini-ui-packages/yongren-statistics-ui/src/pages/Statistics/Statistics.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, memo } from 'react'
-import Taro, { usePullDownRefresh } from '@tarojs/taro'
 import { View, Text, ScrollView } from '@tarojs/components'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
@@ -100,6 +99,9 @@ const Statistics: React.FC<StatisticsProps> = () => {
     return isSuccessfulResponse(data) ? data.stats : []
   }
 
+  // 状态:下拉刷新控制
+  const [refresherTriggered, setRefresherTriggered] = useState(false)
+
   // 图表懒加载效果:逐步加载其他图表
   useEffect(() => {
     const timer1 = setTimeout(() => {
@@ -116,9 +118,8 @@ const Statistics: React.FC<StatisticsProps> = () => {
     }
   }, [])
 
-  // 下拉刷新:刷新所有统计数据
-  // 使用 Promise.all 精确 invalidate 每个 queryKey,确保所有查询都被触发
-  usePullDownRefresh(async () => {
+  // 下拉刷新处理函数:刷新所有统计数据
+  const handleRefresh = async () => {
     console.log('🔄 [下拉刷新] 开始刷新所有统计数据...')
     try {
       console.log('🔄 [下拉刷新] 开始执行 invalidateQueries Promise.all...')
@@ -137,10 +138,10 @@ const Statistics: React.FC<StatisticsProps> = () => {
     } catch (error) {
       console.error('🔄 [下拉刷新] 发生错误:', error)
     } finally {
-      console.log('🔄 [下拉刷新] 调用 stopPullDownRefresh')
-      Taro.stopPullDownRefresh()
+      console.log('🔄 [下拉刷新] 结束刷新状态')
+      setRefresherTriggered(false)
     }
-  })
+  }
 
   // 获取在职人数统计(简化版:无查询参数)
   const { data: employmentCountData, isLoading: isLoadingEmploymentCount } = useQuery({
@@ -252,6 +253,10 @@ const Statistics: React.FC<StatisticsProps> = () => {
       <ScrollView
         className="h-[calc(100%-60px)] overflow-y-auto px-4 pb-16 pt-0"
         scrollY
+        refresherEnabled
+        refresherTriggered={refresherTriggered}
+        onRefresherRefresh={handleRefresh}
+        refresherBackground="#f5f5f5"
       >
         {/* 导航栏 */}
         <Navbar