侧边导航如何联动页面内容

J轩

已于 2023-06-26 15:57:29 修改

阅读量395

点赞数

分类专栏： React 文章标签：前端 javascript react.js

于 2023-04-12 11:19:53 首次发布

本文链接：https://blog.csdn.net/zc_123_/article/details/130102692

版权

React 专栏收录该内容

10 篇文章

订阅专栏

该文章演示了如何利用create-react-app初始化一个React项目，并引入antd-mobile库来创建侧边栏导航。同时，通过LoremIpsum生成模拟内容，并使用state管理当前选中项。文章还涉及了滚动事件监听，以便根据滚动位置自动更新侧边栏的活跃项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

create-react-app #创建react项目

npm i lorem-ipsum #控制内容显示大小

npm install --save antd-mobile #移动端组件

HTML代码：

import React, { useEffect, useRef, useState } from 'react'
import { SideBar } from 'antd-mobile'
import styles from './index.less'
import { LoremIpsum } from 'lorem-ipsum'

const lorem = new LoremIpsum({
  sentencesPerParagraph: {
    max: 8,
    min: 4,
  },
  wordsPerSentence: {
    max: 16,
    min: 4,
  },
})

const items = [
  { key: '1', title: '第一项', text: lorem.generateParagraphs(8) },
  { key: '2', title: '第二项', text: lorem.generateParagraphs(8) },
  { key: '3', title: '第三项', text: lorem.generateParagraphs(8) },
  { key: '4', title: '第四项', text: lorem.generateParagraphs(8) },
]

export default () => {


  return (
    <div className={styles.container}>
      <div className={styles.side} style={{display:'flex'}}>
        <SideBar
        style={{position:'fixed'}}
          className={styles.bar}
          activeKey={activeKey}
          onChange={key => {
            window.document.getElementById(`anchor-${key}`)?.scrollIntoView()
          }}
        >
          {items.map(item => (
            <SideBar.Item key={item.key} title={item.title} />
          ))}
        </SideBar>
        <div className={styles.main} style={{width:'65%',marginLeft:'106px'}} ref={mainElementRef}>
          {items.map(item => (
            <div key={item.key} className={styles.main_content}>
              <h2 id={`anchor-${item.key}`}>{item.title}</h2>
              {item.text}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

JS代码：

const [activeKey, setActiveKey] = useState('1')

  const handleScroll = () => {
    let currentKey = items[0].key
    for (const item of items) {
      const element = document.getElementById(`anchor-${item.key}`)
      if (!element) continue
      const rect = element.getBoundingClientRect()
      if (rect.top <= 0) {
        currentKey = item.key
      } else {
        break
      }
    }
    setActiveKey(currentKey)
  }

  const mainElementRef = useRef(null)

  useEffect(() => {
    const mainElement = mainElementRef.current
    if (!mainElement) return
    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  }, [])

侧边导航与右侧页面内容效果