From 030885010b9ede7e8efbb03d3ab72d2969bbfafa Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Sun, 13 Nov 2022 11:18:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E6=BB=9A=E5=8A=A8=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/example/components/BlogListScroll.js   | 26 ++++++++++++++++---
 themes/fukasawa/LayoutIndex.js                |  4 ++-
 themes/fukasawa/components/BlogListScroll.js  | 25 +++++++++++++-----
 .../fukasawa/components/PaginationSimple.js   |  1 -
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js
index 0492eb14..07da67d3 100644
--- a/themes/example/components/BlogListScroll.js
+++ b/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">
diff --git a/themes/fukasawa/LayoutIndex.js b/themes/fukasawa/LayoutIndex.js
index 7559d65b..47ae1bce 100644
--- a/themes/fukasawa/LayoutIndex.js
+++ b/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>
 }
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
index b295cc09..522d3f0e 100644
--- a/themes/fukasawa/components/BlogListScroll.js
+++ b/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 => (
diff --git a/themes/fukasawa/components/PaginationSimple.js b/themes/fukasawa/components/PaginationSimple.js
index dc13ecb5..71ba8b8f 100644
--- a/themes/fukasawa/components/PaginationSimple.js
+++ b/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'