feat(order): 添加下拉刷新功能到订单列表

- 引入 PullToRefresh 组件实现下拉刷新功能
- 将原有滚动容器包装到 PullToRefresh 组件内部
- 实现下拉刷新逻辑,重置分页数据并重新加载
- 设置刷新头部高度为 60
- 保留原有的无限滚动和上拉加载功能
This commit is contained in:
2026-02-10 13:00:24 +08:00
parent fc3b32215e
commit b22ff991f0

View File

@@ -1,8 +1,7 @@
import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image, Dialog} from '@nutui/nutui-react-taro' import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image, Dialog, PullToRefresh, InfiniteLoading} from '@nutui/nutui-react-taro'
import {useEffect, useState, useCallback, useRef, CSSProperties} from "react"; import {useEffect, useState, useCallback, useRef, CSSProperties} from "react";
import {View, Text} from '@tarojs/components' import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import {InfiniteLoading} from '@nutui/nutui-react-taro'
import dayjs from "dayjs"; import dayjs from "dayjs";
import { import {
pageShopOrder, pageShopOrder,
@@ -685,6 +684,14 @@ function OrderList(props: OrderListProps) {
}) })
} }
</Tabs> </Tabs>
<PullToRefresh
onRefresh={async () => {
setHasMore(true)
await reload(true)
props.onReload?.()
}}
headHeight={60}
>
<View style={getInfiniteUlStyle(props.showSearch)} id="scroll"> <View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
{error ? ( {error ? (
<View className="flex flex-col items-center justify-center h-64"> <View className="flex flex-col items-center justify-center h-64">
@@ -872,6 +879,7 @@ function OrderList(props: OrderListProps) {
</InfiniteLoading> </InfiniteLoading>
)} )}
</View> </View>
</PullToRefresh>
{/* 取消订单确认对话框 */} {/* 取消订单确认对话框 */}
<Dialog <Dialog