功能：无限翻页

.eslintrc.json

@@ -22,7 +22,8 @@
         "endOfLine": "auto",
         "plugins": [
           "prettier-plugin-tailwindcss"
-        ]
+        ],
+        "tailwindConfig": "./tailwind.config.js"
       }
     ]
   },

package.json

@@ -39,7 +39,8 @@
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.1.0",
-    "swiper": "^11.0.5"
+    "swiper": "^11.0.5",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@types/big.js": "^6.2.0",
@@ -49,6 +50,7 @@
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
+    "@types/lodash": "^4.14.202",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint": "^8",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ dependencies:
   js-cookie:
     specifier: ^3.0.5
     version: registry.npmmirror.com/js-cookie@3.0.5
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   next:
     specifier: ^14.0.4
     version: 14.0.4(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
@@ -82,6 +85,9 @@ devDependencies:
   '@types/js-cookie':
     specifier: ^3.0.5
     version: registry.npmmirror.com/@types/js-cookie@3.0.5
+  '@types/lodash':
+    specifier: ^4.14.202
+    version: 4.14.202
   '@types/node':
     specifier: ^20
     version: registry.npmmirror.com/@types/node@20.0.0
@@ -530,6 +536,10 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==, tarball: https://registry.npmmirror.com/@types/json5/-/json5-0.0.29.tgz}
     dev: true
 
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==, tarball: https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz}
+    dev: true
+
   /@typescript-eslint/parser@6.10.0(eslint@8.0.0)(typescript@5.0.2):
     resolution: {integrity: sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==, tarball: https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.10.0.tgz}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1839,6 +1849,10 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==, tarball: https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz}
     dev: true
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
+    dev: false
+
   /loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==, tarball: https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz}
     hasBin: true
@@ -3621,7 +3635,7 @@ packages:
       '@babel/helper-annotate-as-pure': registry.npmmirror.com/@babel/helper-annotate-as-pure@7.22.5
       '@babel/helper-module-imports': registry.npmmirror.com/@babel/helper-module-imports@7.22.15
       '@babel/plugin-syntax-jsx': registry.npmmirror.com/@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.2)
-      lodash: registry.npmmirror.com/lodash@4.17.21
+      lodash: 4.17.21
       picomatch: registry.npmmirror.com/picomatch@2.3.1
       styled-components: registry.npmmirror.com/styled-components@6.1.0(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
@@ -4973,12 +4987,6 @@ packages:
     version: 4.6.2
     dev: true
 
-  registry.npmmirror.com/lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
-    name: lodash
-    version: 4.17.21
-    dev: false
-
   registry.npmmirror.com/loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz}
     name: loose-envify

src/api/modules/home.ts

@@ -72,4 +72,8 @@ export class HomeAPI {
   // 论坛列表
   static getForumList: ForumListType = (params) =>
     request.get('/release/dynamic/dynamicList', { params });
+
+  // 论坛列表
+  static getForumList1: ForumListType = (params) =>
+    request.get('/release/dynamic/dynamicList1', { params });
 }

src/components/InfiniteScrollList/index.tsx

+import React, { useEffect } from 'react';
+import { debounce } from 'lodash';
+
+const InfiniteScrollList: React.FC<{
+  children: React.ReactNode;
+  bottomDistance?: number;
+  onReachBottom?: () => void;
+}> = ({ children, bottomDistance = 0, onReachBottom }) => {
+  // 获取滚动距离
+  const handleScroll = () => {
+    // 获取页面的视口高度和内容高度
+    const { scrollHeight, scrollTop } = document.documentElement;
+    // 对于现代浏览器，通常推荐使用 window.innerHeight 和 window.scrollY 来获取视口高度和滚动位置
+    const { innerHeight, scrollY } = window;
+    // 修正为使用 window 对象的属性获取滚动距离
+    const scrollTopValue = Math.max(
+      scrollY,
+      scrollTop,
+      document.body.scrollTop,
+    );
+
+    // 判断是否滚动到了底部
+    if (scrollTopValue + innerHeight >= scrollHeight - bottomDistance) {
+      onReachBottom?.();
+    }
+  };
+
+  // 使用防抖函数来减少频繁触发
+  const handleDebounce = debounce(handleScroll, 100);
+
+  // 使用 useEffect 钩子来添加和移除滚动事件的监听器
+  useEffect(() => {
+    // 组件挂载后，添加监听器
+    window.addEventListener('scroll', handleDebounce);
+
+    // 在组件卸载前，不仅要移除监听器，还需要清除防抖函数的定时器
+    return () => {
+      window.removeEventListener('scroll', handleDebounce);
+      handleDebounce.cancel(); // Lodash debounce 提供了取消方法
+    };
+  }, []); // 依赖数组为空，表示只执行一次
+
+  return <div>{children}</div>;
+};
+
+export default InfiniteScrollList;

src/components/forumItem/index.tsx

@@ -47,7 +47,14 @@ const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
       <div className="forum-media flex w-full flex-wrap items-start justify-start">
         {getForumMedia(0)?.length
           ? getForumMedia(0)?.map((i, j) => (
-              <Image src={i.url} alt="图片" key={j} />
+              <Image
+                src={i.url}
+                alt="图片"
+                key={j}
+                fallback={
+                  'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/identity-bg.png'
+                }
+              />
             ))
           : undefined}
         {getForumMedia(1)?.length

src/components/home-comp/home-flyer/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { AppListPilotType } from '@/api/interface/home';
+
+// 列表类型
+type ListType = InterListType<AppListPilotType>;
+
+const HomeFlyerView = () => {
+  // 飞手列表
+  const [flyerList, setFlyerList] = useState<ListType>();
+  // 获取飞手列表
+  const getFlyerList = async () => {
+    const res = await HomeAPI.appListPilot({
+      // 审批通过
+      auditStatus: 1,
+      pageNo: 1,
+      pageSize: 20,
+    });
+    if (res && res.code === '200') {
+      const list = res.result?.list || [];
+      setFlyerList(
+        Array.from(
+          { length: list.length < 5 ? list.length : 5 },
+          () => list.splice(Math.floor(Math.random() * list.length), 1)[0],
+        ),
+      );
+      // console.log('获取飞手列表 --->', flyerList.value)
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    getFlyerList().then();
+  }, []);
+  return (
+    <HomeFlyerWrap>
+      {flyerList?.map((i, j) => (
+        <div className="flyer-item" key={j}>
+          <img
+            className="mb-2 h-12 w-12 rounded-full"
+            src={i?.userImg}
+            alt={i?.userName}
+          />
+          <div className="mb-2 font-bold">{i?.userName}</div>
+          <div className="mb-2 text-aaa">
+            <span className="mr-2">{i.residentCity}</span>
+            <span>{i.yearsOfWorking}年经验</span>
+          </div>
+          <Button type="primary" shape="round">
+            关注
+          </Button>
+        </div>
+      ))}
+    </HomeFlyerWrap>
+  );
+};
+
+export default HomeFlyerView;
+// 样式
+const HomeFlyerWrap = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 2rem;
+  .flyer-item {
+    position: relative;
+    width: calc((100% - 4rem) / 5);
+    height: 10rem;
+    box-shadow: 0 0.17rem 0.86rem 0 rgba(65, 65, 65, 0.08);
+    border-radius: 0.33rem;
+    margin-right: 1rem;
+    background: #ffffff;
+    //background: lightblue;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;

src/components/home-comp/home-forum/index.tsx

 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { App, Skeleton } from 'antd';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
-import { InterListType } from '@/api/interface';
+import { InterListType, PaginationProps } from '@/api/interface';
 import { ForumListType } from '@/api/interface/home';
 import ForumItemView from '@/components/forumItem';
+import HomeFlyerView from '@/components/home-comp/home-flyer';
 import HomeTopicView from '@/components/home-comp/home-topic';
+import InfiniteScrollList from '@/components/InfiniteScrollList';
 import { RootState } from '@/store';
-import { setGlobalData } from '@/store/module/globalData';
 import { SystemState } from '@/store/module/system';
 
 // 列表类型
@@ -15,39 +17,63 @@ type ListType = InterListType<ForumListType>;
 
 const HomeForumView = () => {
   // store
-  const dispatch = useDispatch();
+  const { message } = App.useApp();
   // system
   const system = useSelector((state: RootState) => state.system) as SystemState;
+  // 翻页数据
+  const [pagination, setPagination] = useState<
+    { totalPage: number } & PaginationProps
+  >({
+    pageNo: 1,
+    pageSize: 10,
+    totalPage: 0,
+  });
   // 论坛列表
   const [forumList, setForumList] = useState<ListType>([]);
   // 获取论坛列表
   const getForumList = async () => {
-    const res = await HomeAPI.getForumList({
-      pageNo: 5,
-      pageSize: 10,
-    });
+    const res = await HomeAPI[system?.token ? 'getForumList' : 'getForumList1'](
+      {
+        pageNo: pagination.pageNo,
+        pageSize: pagination.pageSize,
+      },
+    );
     if (res && res.code === '200') {
-      setForumList(res.result?.list || []);
-      // console.log('论坛列表 --->', res.result?.list);
+      const { list, totalPage, pageNo, pageSize } = res.result || {};
+      setForumList((prevList) => [...prevList, ...(list || [])]);
+      pagination.totalPage = totalPage;
+      setPagination({ pageNo, pageSize, totalPage });
     }
   };
-  // 页面挂载
-  useEffect(() => {
-    if (!system?.token) {
-      dispatch(setGlobalData({ loginModalVisible: true }));
+  // 添加 handleReachBottom 函数
+  const handleReachBottom = async () => {
+    if (pagination.pageNo < pagination.totalPage) {
+      pagination.pageNo += 1;
+      await getForumList();
     } else {
-      getForumList().then();
+      message.success('没有更多数据了');
     }
-  }, [system]);
+  };
+  // 页面挂载
+  useEffect(() => {
+    getForumList().then();
+  }, []);
   return (
-    <HomeForumWrap>
-      <div className="forum-list">
-        {forumList.map((i, j) => (
-          <ForumItemView key={j} detail={i} />
-        ))}
-      </div>
-      <HomeTopicView />
-    </HomeForumWrap>
+    <InfiniteScrollList bottomDistance={300} onReachBottom={handleReachBottom}>
+      <HomeForumWrap>
+        <div className="forum-list">
+          {forumList
+            ?.slice(0, 1)
+            ?.map((i, j) => <ForumItemView key={j} detail={i} />)}
+          <HomeFlyerView />
+          {forumList
+            ?.slice(1)
+            ?.map((i, j) => <ForumItemView key={j} detail={i} />)}
+          <Skeleton active avatar />
+        </div>
+        <HomeTopicView />
+      </HomeForumWrap>
+    </InfiniteScrollList>
   );
 };
 

src/components/layout/header/index.tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EnvironmentFilled,
   LogoutOutlined,
@@ -7,6 +7,7 @@ import {
 import { Button, Dropdown, MenuProps, Modal } from 'antd';
 import dayjs from 'dayjs';
 import Cookies from 'js-cookie';
+import { throttle } from 'lodash';
 import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { CommonAPI } from '@/api';
@@ -21,7 +22,9 @@ import getLocationByIP from '@/utils/getLocationByIP';
 
 const HeaderView: React.FC<{
   placeholder: boolean;
-}> = ({ placeholder }) => {
+  autoChange: boolean;
+  topDistance: number;
+}> = ({ placeholder, autoChange, topDistance }) => {
   const token = Cookies.get('SHAREFLY-WEB-TOKEN');
   // 当前的路由数据
   const router = useRouter();
@@ -65,6 +68,21 @@ const HeaderView: React.FC<{
   const handleDetail = async (item: { label: string; value: string }) => {
     await router.push(item.value);
   };
+  // 是否自动变化
+  const [isAutoChange, setIsAutoChange] = useState(false);
+  // 定义一个副作用函数，用于获取滚动距离并更新状态
+  const handleScroll = () => {
+    // 获取滚动距离，兼容多种浏览器
+    const scrollTop = Math.max(
+      window.scrollY,
+      document.documentElement.scrollTop,
+      document.body.scrollTop,
+    );
+    // 更新状态
+    setIsAutoChange(scrollTop >= topDistance);
+  };
+  // 节流函数
+  const handleThrottle = throttle(handleScroll, 500);
   // 组件挂载
   useEffect(() => {
     if (!address?.city) {
@@ -80,6 +98,14 @@ const HeaderView: React.FC<{
     } else {
       getAccountInfo().then();
     }
+    if (autoChange) window.addEventListener('scroll', handleThrottle);
+    // 组件卸载前，移除监听器
+    return () => {
+      if (autoChange) {
+        window.removeEventListener('scroll', handleThrottle);
+        handleThrottle.cancel();
+      }
+    };
   }, []);
   // 顶部Tab列表
   const tabList: { label: string; value: string; isQrcode?: boolean }[] = [
@@ -132,7 +158,8 @@ const HeaderView: React.FC<{
     <>
       <HeaderWrap
         style={{
-          background: placeholder ? '#2A2A2A' : 'rgba(86, 86, 86, 0.25)',
+          background:
+            placeholder || isAutoChange ? '#2A2A2A' : 'rgba(86, 86, 86, 0.25)',
         }}
       >
         <div className="header-wrap">
@@ -224,7 +251,7 @@ const HeaderView: React.FC<{
           </div>
         </div>
       </HeaderWrap>
-      {placeholder && (
+      {(placeholder || isAutoChange) && (
         <div
           className="header-wrap"
           style={{ width: '100%', height: '3rem' }}

src/components/layout/index.tsx

@@ -14,7 +14,14 @@ import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
 const LayoutView: React.FC<{
   children?: React.ReactNode;
   placeholder?: boolean;
-}> = ({ children, placeholder }) => {
+  autoChange?: boolean;
+  topDistance?: number;
+}> = ({
+  children,
+  placeholder = true,
+  autoChange = false,
+  topDistance = 0,
+}) => {
   // store
   const dispatch = useDispatch();
   // system
@@ -33,19 +40,13 @@ const LayoutView: React.FC<{
   };
   return (
     <LayoutWrap>
-      <div
-        onClick={() => {
-          // setQrcodeShow(!qrcodeShow);
-        }}
-      >
-        {placeholder || placeholder === undefined ? (
-          <HeaderView placeholder={true}></HeaderView>
-        ) : (
-          <HeaderView placeholder={false}></HeaderView>
-        )}
-        <ContentView>{children}</ContentView>
-        <FooterView></FooterView>
-      </div>
+      <HeaderView
+        placeholder={placeholder}
+        autoChange={autoChange}
+        topDistance={topDistance}
+      ></HeaderView>
+      <ContentView>{children}</ContentView>
+      <FooterView></FooterView>
       {/* 登录弹窗 */}
       <LoginModalView
         open={globalData?.loginModalVisible}

src/pages/_app.tsx

 import React from 'react';
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider, theme, App as AppView } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import type { AppProps } from 'next/app';
 import '../styles/animate.css';
@@ -23,7 +23,9 @@ const App = ({ Component, ...rest }: AppProps) => {
             ...themeConfig,
           }}
         >
-          <Component {...props.pageProps} />
+          <AppView>
+            <Component {...props.pageProps} />
+          </AppView>
         </ConfigProvider>
       </PersistGate>
     </Provider>

src/pages/index.tsx

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import LayoutView from '@/components/layout';
 import HomeView from '@/pages/home';
 
 const App = () => {
-  // 定义一个状态变量，用于存储滚动距离
-  const [scrollY, setScrollY] = useState(0);
-  // 定义一个副作用函数，用于获取滚动距离并更新状态
-  const handleScroll = () => {
-    // 获取滚动距离，兼容多种浏览器
-    const scrollTop =
-      document.documentElement.scrollTop ||
-      window.pageYOffset ||
-      document.body.scrollTop;
-    // 更新状态
-    setScrollY(scrollTop);
-  };
-  // 使用 useEffect 钩子来添加和移除滚动事件的监听器
-  useEffect(() => {
-    // 组件挂载后，添加监听器
-    window.addEventListener('scroll', handleScroll);
-    // 组件卸载前，移除监听器
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []); // 依赖数组为空，表示只执行一次
   return (
-    <LayoutView placeholder={scrollY >= 200}>
+    <LayoutView placeholder={false} autoChange={true} topDistance={180}>
       <HomeView></HomeView>
     </LayoutView>
   );