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 brauchenDie 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. UmsetzungsideenIdee 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) 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:
|
>>: Ein grafisches Tutorial zur Installation des Redhat 8.0-Systems (ein Muss für Anfänger)
Als Neuling, der gerade mit dem Linux-System in K...
Detailliertes Beispiel zum Entfernen doppelter Da...
Wenn wir ein Formular erstellen, legen wir häufig ...
Effektvorschau Klicken Sie rechts auf die Schaltf...
Originalquelle: www.bamagazine.com Enge Bereiche ...
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...
Original-URL: http://segmentfault.com/blog/ciaocc/...
Vor kurzem habe ich vor, eine Cloud-Festplatte au...
Inhaltsverzeichnis Überblick Erstellen Sie eine T...
1. Vue-Projekt verpacken Geben Sie den folgenden ...
1. Systemumgebung Die Systemversion nach dem Yum-...
Der offizielle Quellcode von monaco-editor-vue la...
Gewerkschaftsexekution Verwenden Sie zur Vereinfa...
1. Installieren Sie Tomcat8 mit Docker 1. Suchen ...
Während des täglichen Optimierungsprozesses stell...