适配滚动加载

themes/example/components/BlogListScroll.js

@@ -1,13 +1,14 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import { useState } from 'react'
+import React from 'react'
+import throttle from 'lodash.throttle'
 
 export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = useState(1)
+  const [page, updatePage] = React.useState(1)
 
   let hasMore = false
   const postsToShow = posts
@@ -23,7 +24,26 @@ export const BlogListScroll = props => {
     updatePage(page + 1)
   }
 
-  return <div className="w-full md:pr-12 mb-12">
+  const targetRef = React.useRef(null)
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = React.useCallback(throttle(() => {
+    const scrollS = window.scrollY + window.outerHeight
+    const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+    if (scrollS > clientHeight + 100) {
+      handleGetMore()
+    }
+  }, 500))
+
+  React.useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  return <div className="w-full md:pr-12 mb-12" ref={targetRef}>
           {postsToShow.map(p => (
               <article key={p.id} className="mb-12" >
                   <h2 className="mb-4">

themes/fukasawa/LayoutIndex.js

@@ -1,8 +1,10 @@
+import BLOG from '@/blog.config'
 import BlogListPage from './components/BlogListPage'
+import BlogListScroll from './components/BlogListScroll'
 import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = (props) => {
   return <LayoutBase {...props}>
-    <BlogListPage {...props} />
+    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
   </LayoutBase>
 }

themes/fukasawa/components/BlogListScroll.js

@@ -1,9 +1,9 @@
 import BLOG from '@/blog.config'
-import { useEffect, useState } from 'react'
+import React from 'react'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import { useGlobal } from '@/lib/global'
-
+import throttle from 'lodash.throttle'
 /**
  * 文章列表分页表格
  * @param page 当前页
@@ -14,7 +14,7 @@ import { useGlobal } from '@/lib/global'
  */
 const BlogListScroll = props => {
   const { posts = [] } = props
-  const [colCount, changeCol] = useState(1)
+  const [colCount, changeCol] = React.useState(1)
   const { locale } = useGlobal()
 
   function updateCol() {
@@ -26,8 +26,9 @@ const BlogListScroll = props => {
       changeCol(1)
     }
   }
+  const targetRef = React.useRef(null)
 
-  const [page, updatePage] = useState(1)
+  const [page, updatePage] = React.useState(1)
 
   let hasMore = false
   const postsToShow = posts
@@ -43,11 +44,23 @@ const BlogListScroll = props => {
     updatePage(page + 1)
   }
 
-  useEffect(() => {
+  // 监听滚动自动分页加载
+  const scrollTrigger = React.useCallback(throttle(() => {
+    const scrollS = window.scrollY + window.outerHeight
+    const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+    if (scrollS > clientHeight + 100) {
+      handleGetMore()
+    }
+  }, 500))
+
+  React.useEffect(() => {
     updateCol()
+    window.addEventListener('scroll', scrollTrigger)
+
     window.addEventListener('resize', updateCol)
     return () => {
       window.removeEventListener('resize', updateCol)
+      window.removeEventListener('scroll', scrollTrigger)
     }
   })
 
@@ -55,7 +68,7 @@ const BlogListScroll = props => {
     return <BlogPostListEmpty />
   } else {
     return (
-      <div id="container">
+      <div id="container" ref={targetRef} >
         {/* 文章列表 */}
         <div style={{ columnCount: colCount }}>
           {postsToShow?.map(post => (

themes/fukasawa/components/PaginationSimple.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'