React implementiert Endlosschleifen-Scrollinformationen

React implementiert Endlosschleifen-Scrollinformationen

In diesem Artikel wird der spezifische Code von React zur Erzielung von Informationen zum Scrollen in Endlosschleifen zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

brauchen

Die vom Backend übermittelten Daten werden scrollend angezeigt. Das Scrollen stoppt, wenn die Maus hineinbewegt, und wird fortgesetzt, wenn die Maus herausbewegt. Bitte beachten Sie die Ankündigungsinformationsspalte des Unternehmensportals.

Umsetzungsideen

Idee 1

Definieren Sie einen Timer in componentDidMount, lösen Sie alle 1000 ms ein Ereignis aus, übertragen Sie die ersten Daten im Array in das Array, löschen Sie die ersten Daten und fügen Sie schließlich die Ereignisse onMouEnter und onMouseLeave zum Div hinzu, löschen Sie den Timer, wenn die Maus hineinbewegt wird, und starten Sie den Timer neu, wenn die Maus herausbewegt wird.

Code:

Klasse Roll erweitert React.Component{
  
  Zustand = {
    Liste: [
      { Titel: 'Gedanken einer stillen Nacht' },
      { Titel: 'Tang-Li Bai' },
      { title: 'Helles Mondlicht vor dem Fenster' },
      { title: 'Ich glaube, es ist Frost auf dem Boden' },
      { title: 'Schau hinauf zum hellen Mond' },
      { title: 'Ich schaue nach unten und denke an meine Heimatstadt' },
    ]
  }

  KomponenteWillMount = () => {
    dies.beginnen()
  }

  rollen = () => {
    lass arr = diese.Zustandsliste;
    arr.push(diese.Zustandsliste[0])
    arr.spleiß(0,1)
    dies.setState({
      Liste: arr,
    })
    Konsole.log(diese.Statusliste);
  }

  beginne = () => {
    dieser.timer = setzeInterval(() => {
      dies.rollen()
    }, 1000);
  }

  Stopp = () => {
    Intervall löschen(dieser.Timer)
  }

  rendern () {
    zurückkehren (
      <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'>
        {this.state.list.map(item => {
          zurückkehren (
            <p>
              {item.title}
            </p>
          )
        })}
      </div>
    )
  }
}

Effektbild:

Es ist ersichtlich, dass der implementierte Effekt nicht gut ist und kein Aufwärtsverschiebungseffekt auftritt, sodass die zweite Idee aufkam.

Idee 2

Nehmen Sie basierend auf Idee 1 Änderungen vor und definieren Sie einen Timer in componentDidMount. Jedes Mal, wenn es um einige Pixel nach oben verschoben wird, werden bei einer Verschiebung um eine bestimmte Distanz die ersten Daten im Array in das Array verschoben, dann werden die ersten Daten gelöscht und schließlich werden dem div die Ereignisse onMouEnter und onMouseLeave hinzugefügt.

js-Datei

Klasse Roll erweitert React.Component{

  Zustand = {
    Liste: [
      { title: 'Dies ist Nachricht 1' },
      { title: 'Dies ist Nachricht 2' },
      { title: 'Dies ist Nachricht 3' },
      { title: 'Dies ist Nachricht 4' },
      { title: 'Dies ist Nachricht 5' },
      { title: 'Dies ist Nachricht 6' },
      { title: 'Dies ist Nachricht 7' },
      { title: 'Dies ist Nachricht 8' },
      { title: 'Dies ist Nachricht 9' },
    ],
    Anzahl: 0,
  }

  //Starte den Timer, wenn die Seite gemountet ist componentDidMount = () => {
    dies.beginnen()
  }

  // Zeitgeber beginnt = () => {
    dieser.timer = setzeInterval(() => {
      dies.Roll()
    }, 10);
  }

  // Schalte den Timer aus stop = () => {
    Intervall löschen(dieser.Timer)
  }

  // Jedes Mal, wenn der Versatz 0,5 Pixel beträgt, verwende den Status, um die Anzahl der Versätze zu speichern. Roll = () => {
    dies.setState({
      Anzahl: dieser.Zustand.Anzahl+1
    })
    dies.refs.roll.style.top = -0,5*dieser.Zustand.Anzahl+'px';
    // Wenn der Offset 40px erreicht, schneide die ersten Daten im Array bis zum Ende des Arrays ab und subtrahiere dann die Anzahl der Offsets, die der Höhe einer Zeile entspricht, if(-0.5*this.state.count <= -40){
      lass arr = diese.Zustandsliste;
      arr.push(diese.Zustandsliste[0])
      arr.splice(0,1);
      dies.setState({
        Liste: arr,
        Anzahl: this.state.count – 50,
      })
      this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px'
    }
    
  }

  machen(){
    zurückkehren (
      <div className="box" onMouseEnter={diese.stop} onMouseLeave={diese.begin}>
        <div Klassenname = "Inhalt" ref = "Rolle">
          {this.state.list.map((item)=>{
            zurückkehren (
              <p Klassenname='Zeile'>
                <a href="#" rel="externes nofollow" >
                  {item.title}
                </a>
              </p>
            )
          })}
        </div>
      </div>
    )
  }
}

CSS-Datei

.Kasten{
  Breite: 300px;
  Höhe: 160px;
  Rand: 1px tief schwarz;
  Rand: 200px 300px;
  Position: relativ;
  Überlauf: versteckt;
}

.Inhalt{
  Position: absolut;
  oben: 0px;
}

.Reihe{
  Höhe: 20px;
  Rand: 5px automatisch;
}

Effektbild:

Knoten abrufen

1.Dokument erhält den Knoten

Ich hätte nie gedacht, dass ich in React mithilfe von Dokumenten Elementknoten abrufen kann, genau wie in JS.

2. Schiedsrichter-Akquise

Holen Sie es sich hier.refs.xxx

KomponenteDidMount = () => {
        Konsole.log(diese.refs.test);
    }

    rendern () {
        zurückkehren (
            <div ref='Test'>
                123
            </div>
        )
    }

3. findDOMNode zu erhalten

Erhalten Sie es über ReactDom.findDOMNode(this)
Dies ist die Instanz der aktuellen Komponente

KomponenteDidMount = () => {
    Konsole.log(ReactDom.findDOMNode(dies));
  }

  rendern () {
    zurückkehren (
      <div Klassenname='Test'>
        123
      </div>
    )
  }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • React Native Avatar-Scrolling-Beispiel
  • React-Beispiel für einen digitalen Scroll-Effekt ohne Plugins
  • Implementierung von React-Loop-Daten (Liste)

<<:  HTML 5 Vorschau

>>:  Ein grafisches Tutorial zur Installation des Redhat 8.0-Systems (ein Muss für Anfänger)

Artikel empfehlen

Detailliertes Beispiel zum Entfernen doppelter Daten in MySQL

Detailliertes Beispiel zum Entfernen doppelter Da...

So platzieren Sie große Bilder auf kleinem Raum einer Webseite

Originalquelle: www.bamagazine.com Enge Bereiche ...

Detaillierte Erklärung des Sandbox-Mechanismus von Vue3

Inhaltsverzeichnis Vorwort Browser kompilierte Ve...

Tutorial zur Installation von MySQL unter CentOS7

Vor kurzem habe ich vor, eine Cloud-Festplatte au...

So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit

1. Vue-Projekt verpacken Geben Sie den folgenden ...

Tutorial zur Installation und Konfiguration der Centos7-MySQL-Datenbank

1. Systemumgebung Die Systemversion nach dem Yum-...

Vue verwendet die Methode in der Referenzbibliothek mit Quellcode

Der offizielle Quellcode von monaco-editor-vue la...

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Gewerkschaftsexekution Verwenden Sie zur Vereinfa...

So installieren Sie Tomcat8 im Docker

1. Installieren Sie Tomcat8 mit Docker 1. Suchen ...

Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join

Während des täglichen Optimierungsprozesses stell...