diff --git a/src/views/chicken-circle/comps/comment-list/index.tsx b/src/views/chicken-circle/comps/comment-list/index.tsx index 8012df9..c5236fc 100644 --- a/src/views/chicken-circle/comps/comment-list/index.tsx +++ b/src/views/chicken-circle/comps/comment-list/index.tsx @@ -5,7 +5,7 @@ import { commentSave, getCommentList } from '../../service' import { CommentOutlined, FileImageOutlined, PlusOutlined, SmileOutlined } from '@ant-design/icons' import './index.less' -const CommentInput = ({ momentId, getList, replyType, targetId = '' }) => { +const CommentInput = ({ momentId, getList, replyType, targetId = '', changeActive = null }) => { const [comment, setComment] = useState('') const { userInfo } = useSelector(store => store.userInfo) const userInfoStorage = localStorage.getItem('userInfo') @@ -30,6 +30,7 @@ const CommentInput = ({ momentId, getList, replyType, targetId = '' }) => { setComment('') setImgList([]) getList() + changeActive?.(false) }) } @@ -171,11 +172,19 @@ const CommentItem = ({
{formatDistanceToNow(createdTime) || '12小时前'}
- {replyType === 1 ? '评论' : '回复'} + + {active ? '取消回复' : replyType === 1 ? '评论' : '回复'} +
{active && ( - + )} {children?.length ? children?.map(item => { @@ -228,6 +237,7 @@ const CommentList: FC = props => { children: flattenNestedObjects(item.children || []) } }) + console.log(data, 'data') setReplyList(data) } else { setReplyList([]) diff --git a/src/views/chicken-circle/index.less b/src/views/chicken-circle/index.less index 76bf80d..4d91fb1 100644 --- a/src/views/chicken-circle/index.less +++ b/src/views/chicken-circle/index.less @@ -1,4 +1,6 @@ .circle-box { + height: 100%; + overflow-y: scroll; .top-input-card { padding: 8px 12px; background-color: #f2f3f5; diff --git a/src/views/chicken-circle/index.tsx b/src/views/chicken-circle/index.tsx index 9a329a8..6db234e 100644 --- a/src/views/chicken-circle/index.tsx +++ b/src/views/chicken-circle/index.tsx @@ -7,7 +7,7 @@ import { MessageTwoTone } from '@ant-design/icons' import { Avatar, Button, Card, Input, Popover, Tabs, message, Upload, Image } from 'antd' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { fetchCircleList, saveMoment, getMoments } from './service' import CommentList from './comps/comment-list' import './index.less' @@ -27,6 +27,11 @@ const Circle = () => { const [imgList, setImgList] = useState([]) const [momentList, setMomentList] = useState([]) const [currentReplyCommentId, setCurrentReplyCommentId] = useState(undefined) + const finished = useRef(false) + const [pageInfo, setPageInfo] = useState({ + pageNo: 1, + pageSize: 10 + }) const [previewList, setPreviewList] = useState({ list: [], index: 0 @@ -49,9 +54,12 @@ const Circle = () => { useEffect(() => { getCircleList() - getMomentList() }, []) + useEffect(() => { + getMomentList() + }, [pageInfo]) + const changeCircle = selectItem => { setCurrentSelectCircle(selectItem) setOpenFlag(false) @@ -88,12 +96,13 @@ const Circle = () => { const getMomentList = async () => { const res = await getMoments({ - pageInfo: { - pageNo: 1, - pageSize: 10 - } + pageInfo }) - setMomentList(res.data.result) + const concatList = momentList.concat(res.data.result) + setMomentList(concatList) + if (res.data.result < 10 || concatList.length >= res.data.total) { + finished.current = true + } } const publishMoment = async () => { @@ -108,7 +117,11 @@ const Circle = () => { if (res.success) { setComment('') setImgList([]) - getMomentList() + setPageInfo({ + pageNo: 1, + pageSize: 10 + }) + finished.current = false return message.success('发布成功') } return message.error('有点繁忙呢,要不再试试~~~') @@ -137,8 +150,32 @@ const Circle = () => { }) } + const scrollHandler = e => { + const scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度,随滚动变化 + const clientHeight = e.target.clientHeight // listBox 的视口可见高度,固定不变 + const scrollHeight = e.target.scrollHeight // listBox 的整体高度,随数据加载变化 + const saveHeight = 30 // 安全距离,距离底部XX时,触发加载 + const tempVal = scrollTop + clientHeight + saveHeight + // 如果不加入 saveHeight 安全距离,在 scrollTop + clientHeight == scrollHeight 时,触发加载 + // 加入安全距离,相当于在 scrollTop + clientHeight >= scrollHeight - 30 时,触发加载,比前者更早触发 + if (tempVal >= scrollHeight) { + if (!finished.current) { + setPageInfo({ + pageNo: pageInfo.pageNo + 1, + pageSize: 10 + }) + } + + // if (!finished && !switchFlag) { + // // 数据加载未结束 && 未加锁 + // setPageIndex(pageIndex + 1) + // } + // setSwitchFlag(true) + } + } + return ( -
+