优化：文章列表支持分页加载

src/honor/index.tsx

@@ -3,7 +3,7 @@ import {pageCmsArticle} from "@/api/cms/cmsArticle";
 import {CmsArticle} from "@/api/cms/cmsArticle/model";
 import Taro from '@tarojs/taro'
 import {useRouter} from '@tarojs/taro'
-import {Image} from '@nutui/nutui-react-taro'
+import {Image,InfiniteLoading} from '@nutui/nutui-react-taro'
 import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
 import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
 
@@ -46,7 +46,7 @@ const Index = () => {
     }, [])
 
     return (
-        <div className={'bg-red-200 h-full'}>
+        <InfiniteLoading className={'bg-red-200 h-full'}>
             <div style={{padding: navigation?.span + 'px'}}>
                 <Image src={navigation?.style} width={'100%'}
                        height={'auto'}/>
@@ -122,7 +122,7 @@ const Index = () => {
                 }
             </div>
 
-        </div>
+        </InfiniteLoading>
     )
 }
 export default Index

src/honor/list.tsx

@@ -3,7 +3,8 @@ import {pageCmsArticle} from "@/api/cms/cmsArticle";
 import {CmsArticle} from "@/api/cms/cmsArticle/model";
 import Taro from '@tarojs/taro'
 import {useRouter} from '@tarojs/taro'
-import {Image,InfiniteLoading} from '@nutui/nutui-react-taro'
+import {Image} from '@nutui/nutui-react-taro'
+import {InfiniteLoading} from '@nutui/nutui-react-taro'
 import {getCmsNavigation} from "@/api/cms/cmsNavigation";
 import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
 
@@ -14,6 +15,8 @@ import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
 const List = () => {
     const {params} = useRouter();
     const [navigation, setNavigation] = useState<CmsNavigation>()
+    const [page, setPage] = useState(1)
+    const [hasMore, setHasMore] = useState(true)
     const [list, setList] = useState<CmsArticle[]>([])
 
     const reload = async () => {
@@ -22,7 +25,7 @@ const List = () => {
         // 当前栏目信息
         const navs = await getCmsNavigation(categoryId);
         // 终极新闻列表
-        const articles = await pageCmsArticle({categoryId, limit: 50});
+        const articles = await pageCmsArticle({categoryId, page});
 
         // 当前栏目信息
         if (navs) {
@@ -30,29 +33,59 @@ const List = () => {
         }
         // 新闻列表
         if (articles) {
-            setList(articles?.list || [])
+            if (articles?.list && articles?.list.length > 0) {
+                const newList = list?.concat(articles.list)
+                setList(newList);
+                setHasMore(true)
+            } else {
+                setHasMore(false)
+            }
         }
     }
 
+    const reloadMore = async () => {
+        setPage(page + 1)
+        reload().then();
+    }
+
     useEffect(() => {
-        reload()
+        reload().then()
     }, [])
 
     return (
-        <InfiniteLoading className={'bg-red-200'} style={{height: '100vh'}}>
+        <InfiniteLoading
+            className={'bg-red-200'}
+            style={{height: '100vh'}}
+            hasMore={hasMore}
+            onLoadMore={reloadMore}
+            loadingText={
+                <>
+                    加载中
+                </>
+            }
+            loadMoreText={
+                <>
+                    没有更多了
+                </>
+            }>
             <div style={{padding: navigation?.span + 'px'}}>
-                <Image src={navigation?.style} width={'100%'}
-                       height={'auto'}/>
+                <Image
+                    src={navigation?.style || ''}
+                    style={{width: '100%', height: 'auto'}}
+                    mode="widthFix"
+                />
             </div>
-            <div className={'p-4'}>
+            <div className={'p-3'}>
                 <div
                     className={'relative'}
                     style={{
                         background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
-                        backgroundSize: '100%',
+                        backgroundSize: '120%',
                         backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'center',
+                        borderRadius: '40px',
                         width: '100%',
-                        height: '67px',
+                        height: '65px',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center'