Kaynağa Gözat

♻️ refactor(goods-list): 重构商品列表页滚动事件处理

- 替换触底加载更多为Taro全局钩子useReachBottom
- 替换下拉刷新为Taro全局钩子usePullDownRefresh
- 移除ScrollView组件的onScrollToLower和refresher相关属性

♻️ refactor(index): 重构首页滚动事件处理

- 替换触底加载更多为Taro全局钩子useReachBottom
- 添加下拉刷新功能,使用Taro全局钩子usePullDownRefresh
- 移除ScrollView组件的onScrollToLower属性
yourname 1 ay önce
ebeveyn
işleme
56a71b6eb0

+ 7 - 11
mini/src/pages/goods-list/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState } from 'react'
-import Taro from '@tarojs/taro'
+import Taro, { usePullDownRefresh , useReachBottom} from '@tarojs/taro'
 import { goodsClient } from '@/api'
 import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -68,19 +68,19 @@ export default function GoodsListPage() {
   // 合并所有分页数据
   const allGoods = data?.pages.flatMap(page => page.data) || []
 
-  // 触底加载更多
-  const handleScrollToLower = () => {
+  // 使用Taro全局钩子 - 触底加载更多
+  useReachBottom(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage()
     }
-  }
+  })
 
-  // 下拉刷新
-  const onPullDownRefresh = () => {
+  // 使用Taro全局钩子 - 下拉刷新
+  usePullDownRefresh(() => {
     refetch().finally(() => {
       Taro.stopPullDownRefresh()
     })
-  }
+  })
 
   // 跳转到商品详情
   const handleGoodsClick = (goods: Goods) => {
@@ -117,10 +117,6 @@ export default function GoodsListPage() {
       <ScrollView
         className="flex-1"
         scrollY
-        onScrollToLower={handleScrollToLower}
-        refresherEnabled
-        refresherTriggered={false}
-        onRefresherRefresh={onPullDownRefresh}
       >
         <View className="goods-page-container bg-[#f2f2f2] p-[20rpx_24rpx]">
           {/* 搜索栏 */}

+ 13 - 6
mini/src/pages/index/index.tsx

@@ -12,7 +12,7 @@ import { useAuth } from '@/utils/auth'
 import { useCart } from '@/contexts/CartContext'
 import { Navbar } from '@/components/ui/navbar'
 import { Carousel } from '@/components/ui/carousel'
-import Taro from '@tarojs/taro'
+import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
 
 type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>
 type Goods = GoodsResponse['data'][0]
@@ -53,7 +53,8 @@ const HomePage: React.FC = () => {
     isFetchingNextPage,
     fetchNextPage,
     hasNextPage,
-    error
+    error,
+    refetch
   } = useInfiniteQuery({
     queryKey: ['home-goods-infinite'],
     queryFn: async ({ pageParam = 1 }) => {
@@ -104,12 +105,19 @@ const HomePage: React.FC = () => {
     console.error('广告数据获取失败:', adError)
   }
 
-  // 触底加载更多
-  const handleScrollToLower = () => {
+  // 使用Taro全局钩子 - 触底加载更多
+  useReachBottom(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage()
     }
-  }
+  })
+
+  // 使用Taro全局钩子 - 下拉刷新
+  usePullDownRefresh(() => {
+    refetch().finally(() => {
+      Taro.stopPullDownRefresh()
+    })
+  })
 
   // // 商品点击
   // const handleGoodsClick = (goods: GoodsData, index: number) => {
@@ -166,7 +174,6 @@ const HomePage: React.FC = () => {
       <ScrollView
         className="home-scroll-view"
         scrollY
-        onScrollToLower={handleScrollToLower}
       >
         {/* 页面头部 - 搜索栏和轮播图 */}
         <View className="home-page-header">