当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 浅谈react.js中实现tab吸顶效果的问题

浅谈react.js中实现tab吸顶效果的问题

2017年12月12日  | 移动技术网IT编程  | 我要评论

在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。

实现的思路其实很简单，就是判断当滚动距离scrolltop大于tab距离页面顶部距离offsettop时，将tab的position变为fixed。

在react中，我在state中设置一个navtop属性，切换这个属性的值为true或者false，然后tab标签使用classnames()这个方法来利用navtop的值添加类名fixed。

一开始我是这样写的：

import cs from 'classnames';

class fixedtab extends react.component{
 constructor(props){
   super(props);
   
   this.state = {
    navtop: false
   }

   this.$tab = null;
   this.offsettop = 0;
 }

 componentdidmount(){
  this.$tab = this.refs.tab;
  if(this.$tab){
   this.offsettop = this.$tab.offsettop;
   window.addeventlistener('scroll',this.handlescroll);
  }
 }

 handlescroll(){
  let stop = document.documentelement.scrolltop || window.pageyoffset || document.body.scrolltop;

  if(stop >= this.offsettop){
    this.setstate({
     navtop: true
    })
  }

  if(stop < this.offsettop){
    this.setstate({
     navtop:false
    })
  }
 }

 render(){
  return(
    <div ref="tab" classname={cs({'fixed':this.state.navtop})}></div>
  )
 } 
}

然后我发现这样写有问题，当我滚动条滚动距离达到条件时，tab是出现了吸顶的效果，但一瞬间又恢复了，滚动条也回弹了，一直无法继续下拉。

我一开始以为判断逻辑有问题，但一直找不到解决的办法，后来我怀疑是state值改变的时间差导致的，好像陷入了一个死循环，然后我就在判断滚动距离之前加了一个判断navtop的状态。

修改的主要代码如下：

handlescroll(){
  let stop = document.documentelement.scrolltop || window.pageyoffset || document.body.scrolltop;

  if(!this.state.navtop && stop >= this.offsettop){
    this.setstate({
     navtop: true
    })
  }

  if(stop < this.offsettop){
    this.setstate({
     navtop:false
    })
  }
 }

这样修改之后吸顶效果就正常了。

我认为就是setstate方法导致的问题，setstate本身是一个异步的方法，它还有一个参数是回调函数。

以上这篇浅谈react.js中实现tab吸顶效果的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网