forked from gxwebsoft/mp-10550
feat(order): 添加下拉刷新功能到订单列表
- 引入 PullToRefresh 组件实现下拉刷新功能 - 将原有滚动容器包装到 PullToRefresh 组件内部 - 实现下拉刷新逻辑,重置分页数据并重新加载 - 设置刷新头部高度为 60 - 保留原有的无限滚动和上拉加载功能
This commit is contained in:
@@ -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 {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro';
|
||||
import {InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
pageShopOrder,
|
||||
@@ -685,6 +684,14 @@ function OrderList(props: OrderListProps) {
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
<PullToRefresh
|
||||
onRefresh={async () => {
|
||||
setHasMore(true)
|
||||
await reload(true)
|
||||
props.onReload?.()
|
||||
}}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
|
||||
{error ? (
|
||||
<View className="flex flex-col items-center justify-center h-64">
|
||||
@@ -872,6 +879,7 @@ function OrderList(props: OrderListProps) {
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 取消订单确认对话框 */}
|
||||
<Dialog
|
||||
|
||||
Reference in New Issue
Block a user