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 {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
|
||||||
|
|||||||
Reference in New Issue
Block a user