d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 15:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
目录组件百分比进度
This commit is contained in:
tangly1024
2021-12-22 16:22:17 +08:00
parent 0ef9da886f
commit 565b3ac194
9 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/Progress.js
View File

@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'
const Progress = ({ targetRef }) => {
const [percent, changePercent] = useState(0)
const scrollListener = () => {
if (targetRef.current) {
if (targetRef?.current) {
const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
@@ -23,8 +23,9 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-1 fixed left-0 top-0 w-full shadow-2xl z-40 bg-blue-200'>
<div className='h-1 bg-blue-600 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
return (<div className='h-4 w-full shadow-2xl bg-purple-400'>
<div className='text-center w-full absolute text-white text-xs'>{percent}%</div>
<div className='h-4 bg-purple-700 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
</div>)
}