React 基础知识 es6使用双向锚点,动态生成,也适用单页面路由项目菜鸟教程网_项目

场景React页面中,不确定有多少个需要定位的块,根据元素块的个数,生成对应数量的锚点,点击锚点后页面滚动到指定的块。 页面滚动到指定的块,对应的锚点高亮。github地址:https://github.com/fyxwanan/author-demo锚点超链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。实现dom元素方面// dom
<div

React + es6使用双向锚点,动态生成,也适用单页面路由项目菜鸟教程网

场景

React页面中,不确定有多少个需要定位的块,根据元素块的个数,生成对应数量的锚点,点击锚点后页面滚动到指定的块。 页面滚动到指定的块,对应的锚点高亮。

React 基础知识 es6使用双向锚点,动态生成,也适用单页面路由项目菜鸟教程网_项目

github地址:https://github.com/fyxwanan/author-demo

锚点

超链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。

实现

  • dom元素方面
// dom
<div
    id="know-detail-body"
    onScrollCapture={() => this.onScrollEvent()}
    style={{ height: '200px', overflowY: 'scroll' }}
    ref={(c) => {
      this.scrollRef = c;
    }}
>
  <div className="content">
        <div id="content-div">
          {contentOptions}
        </div>
    </div>

    <div className="anchor-link-body" id="know-link-anchor">
        <div className="link-content-link">
            <span />
        </div>
        <div id="link-contentKey">
          {LinkOptions}
        </div>
    </div>
</div>
  • 构造对象,动态生成元素,对象从接口获取,数目不定,这是个demo
/*
  ObjectList:[ 
  {id: 1, name: '橘子'},
  {id: 2, name: '苹果'},
  {id: 3, name: '香蕉'},
  {id: 4, name: '菠萝'},
]
*/
// 根据数组生成对应的模块, 在render函数内面
const contentOptions = [];
const LinkOptions = [];
ObjectList.forEach((item) => {
  LinkOptions.push(<div id={`link-${item.id}`} className="link-content" onClick={this.scrollToAnchor.bind(this, item.id)}>{item.name}</div>)
  contentOptions .push(
    <div className="content-child">
     <span id={`${item.id}`}>{item.name}</span>
     <div style={{ width: '100%', heigth: '500px' }}>
        我是内容,我是内容
     </div>
   </div>
  )
});
  • 点击锚点,对于的块滑动到浏览器窗口的顶部方法
// 这是滚动方法
scrollToAnchor = (anchorName) => {
    if (anchorName || anchorName === 0) {
      // 找到锚点
      const anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在,就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
        });
      }
    }
  };
  • 生命周期函数中获取所有元素的id集合
  componentDidMount() {
    this.getBoxIds();
  }

/**
   *  1. 在React生命周期函数中执行函数
   *  2. 获取每个块的正文内容初始距离浏览器边框的距离 offsetTop
   */
  getBoxIds = () => {
        // 正文板块绑定的id数组
        const linkIds = [];
        ObjectList.forEach((item, index) => {
            const top = document.getElementById(`${item.id}`);
            if (top) {
                linkIds.push({ key: item.id, offsetTop: top.getBoundingClientRect().top});
            }
        })
        this.setState({ linkIds });
    };

  • 监听页面滚动,操作dom,使导航的锚点高亮
/**
 *  activeLink   -- 高亮的类名,属性在css中自行设置
 *  linkIds    --  锚点对应div id集合的数组
 *  this.scrollRef.scrollTop  滚动条滚动的距离
*/
  onScrollEvent() {
    const { linkIds } = this.state;
    linkIds.forEach((item, index) => {
      if (this.scrollRef.scrollTop > item.offsetTop) {
        document.getElementById(`link-${item.key}`).classList.add('activeLink');
        linkIds.forEach((k, v) => {
          if (item.key !== k.key) {
            document.getElementById(`link-${k.key}`).classList.remove('activeLink');
          }
        });
      }
    });
  }
海计划公众号