huayu-web
/
assistant-todo-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:上滑更多下拉更新

This commit is contained in:
1708-huayu 2024-12-29 17:48:35 +08:00
parent 667faed54d
commit ee2685e78e
2 changed files with 112 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src/pages/ToDoList/index.js
View File

@ -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,76 +47,87 @@ const ToDoList = () => {
}
const ref = useRef(null)
return (
<List
// header='任务清单'
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='droppable'>
{droppableProvided => (
<div ref={droppableProvided.innerRef}>
{taskList.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
opacity: snapshot.isDragging ? 0.8 : 1,
}}
>
<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()
},
},
]}
<Fragment>
<PullToRefresh
onRefresh={async () => {
getTaskList(1).then(result => {
console.log("getTaskList()", result)
setTaskList(result.data.data.content)
setPageNumber(pageNumber+1)
setHasMore(true)
})
}}
>
<List
// header='任务清单'
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='droppable'>
{droppableProvided => (
<div ref={droppableProvided.innerRef}>
{taskList.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
opacity: snapshot.isDragging ? 0.8 : 1,
}}
>
<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
key={item.id}
// prefix={
@ -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={
@ -126,17 +148,20 @@ const ToDoList = () => {
}
}
/>
</SwipeAction>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</List>
</SwipeAction>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</PullToRefresh>
</Fragment>
)
}
export default ToDoList;

5
src/utils/index.js
View File

@ -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) => {