懒加载

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<string>('')
   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 = ({
             <div>{formatDistanceToNow(createdTime) || '12小时前'}</div>
             <div onClick={toggleActive} className={`bottom-btn ${active ? 'active' : ''}`}>
               <CommentOutlined />
-              <span style={{ marginLeft: 5 }}>{replyType === 1 ? '评论' : '回复'}</span>
+              <span style={{ marginLeft: 5 }}>
+                {active ? '取消回复' : replyType === 1 ? '评论' : '回复'}
+              </span>
             </div>
           </div>
           {active && (
-            <CommentInput momentId={momentId} getList={getList} targetId={id} replyType={2} />
+            <CommentInput
+              momentId={momentId}
+              getList={getList}
+              targetId={id}
+              replyType={2}
+              changeActive={setActive}
+            />
           )}
           {children?.length
             ? children?.map(item => {
@@ -228,6 +237,7 @@ const CommentList: FC<any> = props => {
           children: flattenNestedObjects(item.children || [])
         }
       })
+      console.log(data, 'data')
       setReplyList(data)
     } else {
       setReplyList([])

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;

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: {
+      pageInfo
-        pageNo: 1,
-        pageSize: 10
-      }
     })
-    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 (
-    <div className='circle-box'>
+    <div className='circle-box' onScroll={scrollHandler}>
       <Card>
         <div className={`top-input-card ${hasFocus ? 'card-focus' : ''}`}>
           <TextArea

src/views/question-bank/index.tsx

@@ -82,11 +82,11 @@ const QuestionBank = () => {
   }, [pageIndex, selectedValue.labelId, difficulty])
 
   const scrollHandler = e => {
-    let scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度，随滚动变化
+    const scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度，随滚动变化
-    let clientHeight = e.target.clientHeight // listBox 的视口可见高度，固定不变
+    const clientHeight = e.target.clientHeight // listBox 的视口可见高度，固定不变
-    let scrollHeight = e.target.scrollHeight // listBox 的整体高度，随数据加载变化
+    const scrollHeight = e.target.scrollHeight // listBox 的整体高度，随数据加载变化
-    let saveHeight = 30 // 安全距离，距离底部XX时，触发加载
+    const saveHeight = 30 // 安全距离，距离底部XX时，触发加载
-    let tempVal = scrollTop + clientHeight + saveHeight
+    const tempVal = scrollTop + clientHeight + saveHeight
     // 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载
     // 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发
     if (tempVal >= scrollHeight) {