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

更新日期: 2019-09-07阅读: 4.2k标签: 项目

场景

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

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');
          }
        });
      }
    });
  }

链接: https://www.fly63.com/article/detial/5778

程序员最喜欢什么样的项目经理?

在当今的专业环境中,项目经理需要戴上各种帽子,在管理团队的日常功能和理解大局策略之间切换。正因为如此,项目经理对组织变得更有价值,并且他们对技能和战略角色的需求在全球范围内不断增长。但这也提出了一个问题:如何在如此高压的环境中成为更好的项目经理?

原生JS实现随机点名项目

随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。所用知识:Math.random() * num: 产生从0到num的随机数,Math.floor(): 向下取整,简单的DOM操作等

没有项目经验找工作处处碰壁怎么办?

我马上就要毕业了没有开发经验怎么办?我投递了 N 多公司全部没有给工作机会,有的给了面试机会也是没有下文了怎么办?我简历上什么东西都没有,要不要伪造一个工作经历呢?

当了项目经理才明白的10件事!

项目经理这个神奇的职位,改变了我很多工作处事的方式,从前性情纯真的耿直boy,现在变成了人鬼皆爱的老油条, 以下是我当了项目经理之后明白的10件事, 如有雷同,真是太巧。

pm2 快速部署前端项目

pm2 大家应该都知道,主要是用来管理 node 进程,但是同样可以用来部署前端代码。也可以手动添加 public key 到服务器上的 ~/.ssh/authorized_keys,

关于小型长周期项目的一些建议

我不是专业的项目经理,这里不讨论大型项目管理的事情。我们比较常遇到的可能是小型的长周期项目,比如2-4个人,做半年甚至一年的项目。这种项目通常不会有专职的项目经理

水印项目的实现以及两种实现方案的选优

通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器

重构项目,你真的准备好了吗?

我相信每个接受过老项目的程序员可能都吐槽过“前人的代码都是屎”。一个已经有些年头的项目,几乎肯定可以看到——到处拷贝来拷贝去的代码,随处可见的拼写错误,头重脚轻的函数……

浅谈RPC

近几年随着微服务化项目的崛起,逐渐成为许多公司中大型分布式系统架构的主流方式,而今天所说的 RPC 在这其中扮演着至关重要的角色。随着这段日子公司项目微服务化的演进,发现在日常开发中都在隐式或显式的使用 RPC

在Vue项目中使用Eslint+Prettier+Stylelint

首先搭建vue项目,lint选择ESLint + Prettier,配置方式选择In dedicated config files。具体搭建过程这里就不赘述了,如果不熟悉的同学可以点击这里。配置 Stylelint,目前还没有stylelint选项,需要我们自己安装相关的 npm 包

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!