From 4f8f5c377318c83e67fc806859aac8a9310528a8 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 13 Oct 2021 15:45:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=B6=88=E6=8A=96=EF=BC=8C?= =?UTF-8?q?=E5=9B=9E=E9=A1=B6=E6=8C=89=E9=92=AE=E5=8A=A0=E6=95=B0=E5=AD=97?= =?UTF-8?q?=EF=BC=8C=E5=85=B6=E4=BB=96=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Container.js | 36 +++++++++++++++++++---------------- components/JumpToTop.js | 33 ++++++++++++++++++++------------ components/MenuButtonGroup.js | 19 +++++++++--------- components/Progress.js | 20 ++++++++++--------- components/RightAside.js | 8 ++++---- components/TocBar.js | 6 +++--- 6 files changed, 68 insertions(+), 54 deletions(-) diff --git a/components/Container.js b/components/Container.js index 948ba596..90af14e8 100644 --- a/components/Container.js +++ b/components/Container.js @@ -1,28 +1,32 @@ import PropTypes from 'prop-types' -import React, { useEffect } from 'react' +import React, { useCallback, useEffect } from 'react' import CommonHead from '@/components/CommonHead' import TopNav from '@/components/TopNav' +import throttle from 'lodash.throttle' const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => { let windowTop = 0 + const scrollTrigger = useCallback(throttle(() => { + const scrollS = window.scrollY + const nav = document.querySelector('#sticky-nav') + const tagsBar = document.querySelector('#tags-bar') + if (scrollS >= windowTop && scrollS > 10) { + nav && nav.classList.add('-mt-16') + tagsBar && tagsBar.classList.add('-mt-32') + windowTop = scrollS + } else { + nav && nav.classList.remove('-mt-16') + tagsBar && tagsBar.classList.remove('-mt-32') + windowTop = scrollS + } + }, 200)) + // 监听滚动 useEffect(() => { - function scrollTrigger () { - const scrollS = window.scrollY - const nav = document.querySelector('#sticky-nav') - const tagsBar = document.querySelector('#tags-bar') - if (scrollS >= windowTop) { - nav && nav.classList.add('-mt-16') - tagsBar && tagsBar.classList.add('-mt-32') - windowTop = scrollS - } else { - nav && nav.classList.remove('-mt-16') - tagsBar && tagsBar.classList.remove('-mt-32') - windowTop = scrollS - } - } - window.addEventListener('scroll', scrollTrigger) + return () => { + window.removeEventListener('scroll', scrollTrigger) + } }) return ( <> diff --git a/components/JumpToTop.js b/components/JumpToTop.js index 77514d1b..8e03cc29 100644 --- a/components/JumpToTop.js +++ b/components/JumpToTop.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import throttle from 'lodash.throttle' import { useLocale } from '@/lib/locale' @@ -8,29 +8,38 @@ import { useLocale } from '@/lib/locale' * @returns {JSX.Element} * @constructor */ -const JumpToTop = () => { +const JumpToTop = ({ targetRef }) => { const locale = useLocale() - const [show, switchShow] = useState(false) + const [percent, changePercent] = useState(0) + const scrollListener = useCallback(throttle(() => { + // 处理是否显示回到顶部按钮 + const scrollY = window.pageYOffset + const fullHeight = targetRef.current.clientHeight - window.outerHeight + const shouldShow = scrollY > 100 + if (shouldShow !== show) { + switchShow(shouldShow) + } + let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0)) + if (per > 100) per = 100 + changePercent(per) + }, 100)) useEffect(() => { - const scrollListener = throttle(() => { - // 处理是否显示回到顶部按钮 - const shouldShow = window.scrollY > 100 - if (shouldShow !== show) { - switchShow(shouldShow) - } - }, 500) document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) return (
+ className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
window.scrollTo({ top: 0, behavior: 'smooth' })}> - +
+ {percent}% +
+
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index 4908e72e..d0538693 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -17,25 +17,24 @@ const MenuButtonGroup = ({ allowCollapse = false }) => { { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true } ] return } export default MenuButtonGroup diff --git a/components/Progress.js b/components/Progress.js index f542d438..a3d27297 100644 --- a/components/Progress.js +++ b/components/Progress.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import throttle from 'lodash.throttle' /** @@ -8,15 +8,17 @@ import throttle from 'lodash.throttle' */ const Progress = ({ targetRef }) => { const [percent, changePercent] = useState(0) + const scrollListener = useCallback(throttle(() => { + if (targetRef.current) { + const scrollY = window.pageYOffset + const fullHeight = targetRef.current.clientHeight - window.outerHeight + let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0)) + if (per > 100) per = 100 + changePercent(per) + } + }, 100)) + useEffect(() => { - const scrollListener = throttle(() => { - if (targetRef.current) { - const fullHeight = targetRef.current.clientHeight - const per = parseFloat(((window.scrollY / (fullHeight - 100) * 100)).toFixed(0)) - changePercent(per) - } - // console.log('滚动信息', window.scrollY, fullHeight, per) - }, 1) document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [percent]) diff --git a/components/RightAside.js b/components/RightAside.js index dfd52e5f..a050430e 100644 --- a/components/RightAside.js +++ b/components/RightAside.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useRef, useState } from 'react' import TocBar from '@/components/TocBar' import throttle from 'lodash.throttle' import ShareButton from '@/components/ShareButton' @@ -30,8 +30,8 @@ const RightAside = ({ toc, post }) => { } }, 500) const [hideAside, changeHideAside] = useState(true) - - return