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

feat:flex,左右对齐

This commit is contained in:
1708-huayu 2024-12-29 21:14:08 +08:00
parent ee2685e78e
commit 854fe821d4
2 changed files with 142 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/ToDoList/index.css
View File

@ -1,3 +1,6 @@
.adm-list-default{ .adm-list-default{
width:100%; width:100%;
} }
.adm-card-header-title{
width:100%;
}

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

@ -1,4 +1,4 @@
import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile' import {Card, Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useEffect, useRef, useState} from 'react' import React, {Fragment, useEffect, useRef, useState} from 'react'
import { import {
DragDropContext, DragDropContext,
@ -25,19 +25,18 @@ const ToDoList = () => {
const [taskList, setTaskList] = useState([]) const [taskList, setTaskList] = useState([])
const [hasMore, setHasMore] = useState(true) const [hasMore, setHasMore] = useState(true)
const [pageNumber, setPageNumber] = useState(1) const [pageNumber, setPageNumber] = useState(1)
async function loadMore() { async function loadMore() {
getTaskList(pageNumber).then(result => { getTaskList(pageNumber+1).then(result => {
console.log("getTaskList()", result)
setTaskList(val => [...val, ...result.data.data.content]) setTaskList(val => [...val, ...result.data.data.content])
setHasMore(result.data.data.content.length > 0) setHasMore(result.data.data.content.length > 0)
setPageNumber(pageNumber+1)
}) })
setPageNumber(pageNumber + 1)
} }
useEffect(() => { useEffect(() => {
getTaskList(pageNumber).then(result => { getTaskList(pageNumber).then(result => {
console.log("getTaskList()", result)
setTaskList(result.data.data.content) setTaskList(result.data.data.content)
setPageNumber(pageNumber+1)
}) })
}, []) }, [])
const onDragEnd = (result) => { const onDragEnd = (result) => {
@ -53,7 +52,7 @@ const ToDoList = () => {
getTaskList(1).then(result => { getTaskList(1).then(result => {
console.log("getTaskList()", result) console.log("getTaskList()", result)
setTaskList(result.data.data.content) setTaskList(result.data.data.content)
setPageNumber(pageNumber+1) setPageNumber(1)
setHasMore(true) setHasMore(true)
}) })
}} }}
@ -139,15 +138,47 @@ 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={
() => { // () => {
console.log("dianji") // console.log("dianji")
} // }
} // }
/> title={
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
flexWrap: "nowrap",
fontSize: "large",
color: "black"
}}>
<span>{item.name}</span>
{item.expectedEndTime && <span>
结束时间:{item.expectedEndTime}</span>}
</div>}
description={item.description}
>
{/*<Card style={{width: "100%"}} title={*/}
{/* <div style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "space-between",*/}
{/* alignItems: "center",*/}
{/* flexDirection: "row",*/}
{/* flexWrap: "nowrap"*/}
{/* }}>*/}
{/* <span>{item.name}</span>*/}
{/* {item.expectedEndTime && <span>*/}
{/* 结束时间:{item.expectedEndTime}</span>}*/}
{/* </div>}*/}
{/*>*/}
{/* {item.description}*/}
{/*</Card>*/}
</List.Item>
</SwipeAction> </SwipeAction>
</div> </div>
)} )}
@ -159,7 +190,7 @@ const ToDoList = () => {
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</List> </List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> <InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
</PullToRefresh> </PullToRefresh>
</Fragment> </Fragment>
) )