feat:上滑更多下拉更新

src/pages/ToDoList/index.js

@@ -1,5 +1,5 @@
-import {Dialog, Image, List, SwipeAction} from 'antd-mobile'
-import React, {useEffect, useRef, useState} from 'react'
+import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
+import React, {Fragment, useEffect, useRef, useState} from 'react'
 import {
     DragDropContext,
     Draggable,
@@ -23,10 +23,21 @@ const reorder = (
 
 const ToDoList = () => {
     const [taskList, setTaskList] = useState([])
+    const [hasMore, setHasMore] = useState(true)
+    const [pageNumber, setPageNumber] = useState(1)
+    async function loadMore() {
+        getTaskList(pageNumber).then(result => {
+            console.log("getTaskList()", result)
+            setTaskList(val => [...val, ...result.data.data.content])
+            setHasMore(result.data.data.content.length > 0)
+            setPageNumber(pageNumber+1)
+        })
+    }
     useEffect(() => {
-        getTaskList().then(result => {
+        getTaskList(pageNumber).then(result => {
             console.log("getTaskList()", result)
             setTaskList(result.data.data.content)
+            setPageNumber(pageNumber+1)
         })
     }, [])
     const onDragEnd = (result) => {
@@ -36,6 +47,17 @@ const ToDoList = () => {
     }
     const ref = useRef(null)
     return (
+        <Fragment>
+            <PullToRefresh
+                onRefresh={async () => {
+                    getTaskList(1).then(result => {
+                        console.log("getTaskList()", result)
+                        setTaskList(result.data.data.content)
+                        setPageNumber(pageNumber+1)
+                        setHasMore(true)
+                    })
+                }}
+            >
             <List
                 // header='任务清单'
             >
@@ -117,7 +139,7 @@ const ToDoList = () => {
                                                         //         height={40}
                                                         //     />
                                                         // }
-                                                        title={<span style={{color:"red"}}>{item.name}</span>}
+                                                        title={<span style={{color: "red"}}>{item.name}</span>}
                                                         children={item.description}
                                                         description={item.state}
                                                         onClick={
@@ -137,6 +159,9 @@ const ToDoList = () => {
                     </Droppable>
                 </DragDropContext>
             </List>
+            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
+            </PullToRefresh>
+        </Fragment>
     )
 }
 export default ToDoList;

src/utils/index.js

@@ -24,8 +24,9 @@ export const getCurrentCity=()=>{
     return Promise.resolve(localCity)
 }
 
-export const getTaskList=  () => {
-    return requestUtil.get('/todo-server/search/task_message_tree?search=%7B%22pageSize%22%3A20%2C%22pageNumber%22%3A1%2C%22data%22%3A%5B%7B%22name%22%3A%22tree%22%2C%22value%22%3A%22TRUE%22%2C%22operateType%22%3A%22TREE-FILTER%22%7D%2C%7B%22name%22%3A%22state%22%2C%22value%22%3A%228%2C9%22%2C%22operateType%22%3A%22IN%22%7D%5D%7D');
+export const getTaskList=  (pageNumber) => {
+    let request = encodeURI('{"pageSize":20,"pageNumber":'+pageNumber+',"data":[{"name":"tree","value":"TRUE","operateType":"TREE-FILTER"},{"name":"state","value":"8,9","operateType":"IN"}]}')
+    return requestUtil.get('/todo-server/search/task_message_tree?search='+request);
 }
 // 根据pid获取未完成的任务
 export const getTaskByPid = (pid) => {