Heim > Web-Frontend > js-Tutorial > Hauptteil

Probleme bei der Implementierung der Tab-Obergrenze mithilfe von React.js

一个新手
Freigeben: 2017-09-06 11:56:16
Original
1706 Leute haben es durchsucht

Bei der Entwicklung von React-Projekten besteht die Anforderung, dass beim Scrollen der Seite zur Position der Registerkarte die Registerkarte oben fixiert sein sollte.

Die Implementierungsidee ist eigentlich sehr einfach: Bestimmen Sie, wann der Bildlaufabstand scrollTop größer ist als der Abstand zwischen der Registerkarte und dem oberen Rand der Seite offsetTop, und ändern Sie die Position der Registerkarte auf „Fest“.

In React setze ich ein navTop-Attribut im Status, ändere den Wert dieses Attributs auf true oder false und verwende dann die classnames()-Methode für das Tab-Tag, um den mit dem Wert festgelegten Klassennamen hinzuzufügen von navTop.

Zuerst habe ich so geschrieben:


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(       <p ref="tab" className={cs({&#39;fixed&#39;:this.state.navTop})}></p>    )
  }  
}
Nach dem Login kopieren

Dann habe ich festgestellt, dass beim Schreiben so etwas nicht stimmt Die Bedingung: Die Registerkarte hatte einen Decken-Decke-Effekt, der sich jedoch sofort erholte, und auch die Bildlaufleiste prallte zurück, sodass es unmöglich war, weiter nach unten zu scrollen.

Zuerst dachte ich, es gäbe ein Problem mit der Beurteilungslogik, aber ich konnte nie eine Lösung finden. Später vermutete ich, dass es an der Zeitdifferenz zwischen Zustandswertänderungen lag. Es schien, als ob ich feststeckte eine Endlosschleife, und dann habe ich die Scrollentfernung beurteilt. Zuvor wurde eine Funktion hinzugefügt, um den Status von navTop zu bestimmen.

Der geänderte Hauptcode lautet wie folgt:


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
       })
    }
  }
Nach dem Login kopieren

Nach dieser Änderung ist der Deckeneffekt normal.

Das obige ist der detaillierte Inhalt vonProbleme bei der Implementierung der Tab-Obergrenze mithilfe von React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!