feat:上滑更多下拉更新
This commit is contained in:
1708-huayu
parent
667faed54d
commit
ee2685e78e
|
|
@ -1,5 +1,5 @@
|
||||||
import {Dialog, Image, List, SwipeAction} from 'antd-mobile'
|
import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
|
||||||
import React, {useEffect, useRef, useState} from 'react'
|
import React, {Fragment, useEffect, useRef, useState} from 'react'
|
||||||
import {
|
import {
|
||||||
DragDropContext,
|
DragDropContext,
|
||||||
Draggable,
|
Draggable,
|
||||||
|
|
@ -23,10 +23,21 @@ const reorder = (
|
||||||
|
|
||||||
const ToDoList = () => {
|
const ToDoList = () => {
|
||||||
const [taskList, setTaskList] = useState([])
|
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(() => {
|
useEffect(() => {
|
||||||
getTaskList().then(result => {
|
getTaskList(pageNumber).then(result => {
|
||||||
console.log("getTaskList()", result)
|
console.log("getTaskList()", result)
|
||||||
setTaskList(result.data.data.content)
|
setTaskList(result.data.data.content)
|
||||||
|
setPageNumber(pageNumber+1)
|
||||||
})
|
})
|
||||||
}, [])
|
}, [])
|
||||||
const onDragEnd = (result) => {
|
const onDragEnd = (result) => {
|
||||||
|
|
@ -36,76 +47,87 @@ const ToDoList = () => {
|
||||||
}
|
}
|
||||||
const ref = useRef(null)
|
const ref = useRef(null)
|
||||||
return (
|
return (
|
||||||
<List
|
<Fragment>
|
||||||
// header='任务清单'
|
<PullToRefresh
|
||||||
>
|
onRefresh={async () => {
|
||||||
<DragDropContext onDragEnd={onDragEnd}>
|
getTaskList(1).then(result => {
|
||||||
<Droppable droppableId='droppable'>
|
console.log("getTaskList()", result)
|
||||||
{droppableProvided => (
|
setTaskList(result.data.data.content)
|
||||||
<div ref={droppableProvided.innerRef}>
|
setPageNumber(pageNumber+1)
|
||||||
{taskList.map((item, index) => (
|
setHasMore(true)
|
||||||
<Draggable key={item.id} draggableId={item.id} index={index}>
|
})
|
||||||
{(provided, snapshot) => (
|
}}
|
||||||
<div
|
>
|
||||||
ref={provided.innerRef}
|
<List
|
||||||
{...provided.draggableProps}
|
// header='任务清单'
|
||||||
{...provided.dragHandleProps}
|
>
|
||||||
style={{
|
<DragDropContext onDragEnd={onDragEnd}>
|
||||||
...provided.draggableProps.style,
|
<Droppable droppableId='droppable'>
|
||||||
opacity: snapshot.isDragging ? 0.8 : 1,
|
{droppableProvided => (
|
||||||
}}
|
<div ref={droppableProvided.innerRef}>
|
||||||
>
|
{taskList.map((item, index) => (
|
||||||
<SwipeAction
|
<Draggable key={item.id} draggableId={item.id} index={index}>
|
||||||
ref={ref}
|
{(provided, snapshot) => (
|
||||||
closeOnAction={false}
|
<div
|
||||||
closeOnTouchOutside={false}
|
ref={provided.innerRef}
|
||||||
rightActions={[
|
{...provided.draggableProps}
|
||||||
{
|
{...provided.dragHandleProps}
|
||||||
key: 'delete',
|
style={{
|
||||||
text: '删除',
|
...provided.draggableProps.style,
|
||||||
color: 'danger',
|
opacity: snapshot.isDragging ? 0.8 : 1,
|
||||||
onClick: async () => {
|
}}
|
||||||
await Dialog.confirm({
|
|
||||||
content: '确定要关闭吗？',
|
|
||||||
})
|
|
||||||
ref.current?.close()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'close',
|
|
||||||
text: '关闭',
|
|
||||||
color: 'warning',
|
|
||||||
onClick: async () => {
|
|
||||||
await Dialog.confirm({
|
|
||||||
content: '确定要关闭吗？',
|
|
||||||
})
|
|
||||||
ref.current?.close()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'update',
|
|
||||||
text: '修改',
|
|
||||||
color: 'primary',
|
|
||||||
onClick: async () => {
|
|
||||||
await Dialog.confirm({
|
|
||||||
content: '确定要修改吗？',
|
|
||||||
})
|
|
||||||
ref.current?.close()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'complete',
|
|
||||||
text: '完成',
|
|
||||||
color: 'success',
|
|
||||||
onClick: async () => {
|
|
||||||
await Dialog.confirm({
|
|
||||||
content: '确定要完成吗？',
|
|
||||||
})
|
|
||||||
ref.current?.close()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
|
<SwipeAction
|
||||||
|
ref={ref}
|
||||||
|
closeOnAction={false}
|
||||||
|
closeOnTouchOutside={false}
|
||||||
|
rightActions={[
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
text: '删除',
|
||||||
|
color: 'danger',
|
||||||
|
onClick: async () => {
|
||||||
|
await Dialog.confirm({
|
||||||
|
content: '确定要关闭吗？',
|
||||||
|
})
|
||||||
|
ref.current?.close()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'close',
|
||||||
|
text: '关闭',
|
||||||
|
color: 'warning',
|
||||||
|
onClick: async () => {
|
||||||
|
await Dialog.confirm({
|
||||||
|
content: '确定要关闭吗？',
|
||||||
|
})
|
||||||
|
ref.current?.close()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
text: '修改',
|
||||||
|
color: 'primary',
|
||||||
|
onClick: async () => {
|
||||||
|
await Dialog.confirm({
|
||||||
|
content: '确定要修改吗？',
|
||||||
|
})
|
||||||
|
ref.current?.close()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'complete',
|
||||||
|
text: '完成',
|
||||||
|
color: 'success',
|
||||||
|
onClick: async () => {
|
||||||
|
await Dialog.confirm({
|
||||||
|
content: '确定要完成吗？',
|
||||||
|
})
|
||||||
|
ref.current?.close()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
<List.Item
|
<List.Item
|
||||||
key={item.id}
|
key={item.id}
|
||||||
// prefix={
|
// prefix={
|
||||||
|
|
@ -117,7 +139,7 @@ const ToDoList = () => {
|
||||||
// height={40}
|
// height={40}
|
||||||
// />
|
// />
|
||||||
// }
|
// }
|
||||||
title={<span style={{color:"red"}}>{item.name}</span>}
|
title={<span style={{color: "red"}}>{item.name}</span>}
|
||||||
children={item.description}
|
children={item.description}
|
||||||
description={item.state}
|
description={item.state}
|
||||||
onClick={
|
onClick={
|
||||||
|
|
@ -126,17 +148,20 @@ const ToDoList = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</SwipeAction>
|
</SwipeAction>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
))}
|
))}
|
||||||
{droppableProvided.placeholder}
|
{droppableProvided.placeholder}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Droppable>
|
</Droppable>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
</List>
|
</List>
|
||||||
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||||||
|
</PullToRefresh>
|
||||||
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default ToDoList;
|
export default ToDoList;
|
||||||
|
|
@ -24,8 +24,9 @@ export const getCurrentCity=()=>{
|
||||||
return Promise.resolve(localCity)
|
return Promise.resolve(localCity)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getTaskList= () => {
|
export const getTaskList= (pageNumber) => {
|
||||||
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');
|
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获取未完成的任务
|
// 根据pid获取未完成的任务
|
||||||
export const getTaskByPid = (pid) => {
|
export const getTaskByPid = (pid) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue