在我们看那种一长页的技术文档的时候（右边固定是菜单目录），当你滚动到某一个新的章节，右边的菜单也会滚到跟你现在章节相应的地方，并高亮该链接表示“已选定”。
我用过AntD和一些组件库，并没发现有这个功能，于是自己实现一个。
我们用了AntD的菜单和Affix来固定菜单：
<Layout style={{marginLeft: '-1.5em'}}>
<Layout.Sider style={{background: 'rgb(37, 48, 56)'}}>
<Affix offsetTop={165}>
<Menu style={{background: 'rgb(37, 48, 56)'}} theme='dark' mode='inline' selectedKeys={[selectedMenuItem]} items={items} onSelect={selectMenuItem} />
</Affix>
</Layout.Sider>
<Layout.Content>
...
</Layout.Content>
</Layout>
给内容定义锚点 <a className="anchor" id='${anchor-name}'></a>
<Layout.Content>
<div className="opPageContent">
{/* <h2 className='colorRed'>{formatMsg("WLC")}</h2><br/> */}
<a className="anchor" id='ICE Scores'></a>
<h2>Current ICE scores by services</h2>
<div style={style}>
<IceChartForAll
data={props.iceScoreList}
metaData = {props.metaData}
onSvsChanged = {onSvsChanged}
gotoService={viewIceScoreHistory}/>
</div>
<a className="anchor" id='Jenkins Activities'></a>
<h2>Current Jenkins activity by microservices</h2>
<div style={style}>
<JenkinsActivityChartForAll
data={props.jenkinsActivityList}
metaData = {props.metaData}
onSvsChanged = {onSvsChanged}
gotoMicroService={viewMSIceScoreHistory}/>
</div>
{/* <h1>ICE Score History by services</h1>
<div style={style}>
<LinePlotWithSlider/>
</div> */}
<a className="anchor" id='Incompliant Pipelines'></a>
<h2>Incompliant pipeline</h2>
<div>
<span>No data means all good!</span>
<IncompliantList />
</div>
</div>
</Layout.Content>
锚点的样式：
a.anchor {
display: block;
position: relative;
top: -180px;
visibility: hidden;
}
现在我们来监控一下滚动位置：
useEffect(()=> {
window.addEventListener("scroll", setScroll);
return () => {
window.removeEventListener("scroll", setScroll);
};
}, [])
// Will try to highlight the menu when it is scrolled to the anchor.
const setScroll = (event) => {
let minKey = 1
for(let i=items.length-1; i>=0; i--) {
let e = items[i]
let id = e.label
let rect = document.getElementById(id).getBoundingClientRect()
if (rect.top < 200) {
minKey = e.key
break
}
}
setSelectedMenuItem(`${minKey}`)
}
好的，大功告成！
附上完整示例：
import React, {useState, useEffect} from 'react';
import { withRouter } from 'react-router-dom';
import IceChartForAll from './iceChartForAll'
import JenkinsActivityChartForAll from './jenkinsActivityChartForAll'
import IncompliantList from './incompliantList'
import {Layout, Menu, Affix} from "antd";
import './dashboard.css'
import { BarChartOutlined, LineChartOutlined, WarningOutlined } from "@ant-design/icons";
const Home = (props) => {
const [selectedMenuItem, setSelectedMenuItem] = useState('1')
// Do it once
useEffect(()=> {
if(props.iceScoreList.length == 0){
props.getIceScoresByService({})
}
if(props.jenkinsActivityList.length == 0){
props.getJenkinsActivityByMicro()
}
window.addEventListener("scroll", setScroll);
return () => {
window.removeEventListener("scroll", setScroll);
};
}, [])
const gotoService = (id) => {
let pathname = `/service/detail/${id}`
props.history.push({
pathname
})
}
const gotoMicroService = (id) => {
let pathname = `/microservice/detail/${id}`
props.history.push({
pathname
})
}
const viewIceScoreHistory = (id) =>{
props.history.push({
pathname: `/service/icehistory/${id}`,
})
}
const viewMSIceScoreHistory = (id) =>{
props.history.push({
pathname: `/microservice/icehistory/${id}`,
})
}
const onSvsChanged = (value, props, setData) => {
if (value) {
setData(props.data?.filter(e => e.svs == value))
} else {
setData(props.data)
}
}
// Will try to highlight the menu when it is scrolled to the anchor.
const setScroll = (event) => {
let minKey = 1
for(let i=items.length-1; i>=0; i--) {
let e = items[i]
let id = e.label
let rect = document.getElementById(id).getBoundingClientRect()
if (rect.top < 200) {
minKey = e.key
break
}
}
setSelectedMenuItem(`${minKey}`)
}
const style = {
margin: '30px 0'
}
const items = [
{ label: 'ICE Scores', key: '1', icon: <BarChartOutlined /> }, // remember to pass the key prop
{ label: 'Jenkins Activities', key: '2', icon: <LineChartOutlined /> }, // which is required
{ label: 'Incompliant Pipelines', key: '3', icon: <WarningOutlined /> },
];
const selectMenuItem = (item) => {
setSelectedMenuItem(item.key)
let es = items.filter(e => e.key == item.key)
if (es.length > 0) {
let e = es[0]
location.hash = "#" + e.label;
}
}
return (
<Layout style={{marginLeft: '-1.5em'}}>
<Layout.Sider style={{background: 'rgb(37, 48, 56)'}}>
<Affix offsetTop={165}>
<Menu style={{background: 'rgb(37, 48, 56)'}} theme='dark' mode='inline' selectedKeys={[selectedMenuItem]} items={items} onSelect={selectMenuItem} />
</Affix>
</Layout.Sider>
<Layout.Content>
<div className="opPageContent">
{/* <h2 className='colorRed'>{formatMsg("WLC")}</h2><br/> */}
<a className="anchor" id='ICE Scores'></a>
<h2>Current ICE scores by services</h2>
<div style={style}>
<IceChartForAll
data={props.iceScoreList}
metaData = {props.metaData}
onSvsChanged = {onSvsChanged}
gotoService={viewIceScoreHistory}/>
</div>
<a className="anchor" id='Jenkins Activities'></a>
<h2>Current Jenkins activity by microservices</h2>
<div style={style}>
<JenkinsActivityChartForAll
data={props.jenkinsActivityList}
metaData = {props.metaData}
onSvsChanged = {onSvsChanged}
gotoMicroService={viewMSIceScoreHistory}/>
</div>
{/* <h1>ICE Score History by services</h1>
<div style={style}>
<LinePlotWithSlider/>
</div> */}
<a className="anchor" id='Incompliant Pipelines'></a>
<h2>Incompliant pipeline</h2>
<div>
<span>No data means all good!</span>
<IncompliantList />
</div>
</div>
</Layout.Content>
</Layout>
)
}
export default withRouter(Home)
网友评论