この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 必要バックエンドから送信されたデータはスクロール表示されます。マウスが内側に移動するとスクロールが停止し、マウスが外側に移動するとスクロールが継続します。企業ポータルのお知らせ情報欄を参照してください。 実装のアイデアアイデア 1 componentDidMount にタイマーを定義し、1000 ミリ秒ごとにイベントをトリガーし、配列の最初のデータを配列にプッシュし、最初のデータを削除し、最後に onMouEnter イベントと onMouseLeave イベントを div に追加し、マウスが内側に移動するとタイマーをクリアし、マウスが外側に移動するとタイマーを再起動します。 コード: クラスRollはReact.Componentを拡張します{ 状態 = { リスト: [ { タイトル: 「静かな夜の思い」 }, { タイトル: '唐李白' }, { タイトル: 「窓の前の明るい月明かり」 }, { title: 「地面に霜が降りているようだ」 }, { タイトル: 「明るい月を見上げて」 }, { タイトル: 「故郷を見下ろしながら思いを馳せる」 }, ] } コンポーネントWillMount = () => { この関数を開始します } ロール = () => { arr = this.state.list とします。 arr.push(この状態リスト[0]) 配列連結(0,1) this.setState({ リスト: arr, }) console.log(この状態のリスト); } 開始 = () => { this.timer = setInterval(() => { this.roll() }, 1000); } 停止 = () => { クリア間隔(this.timer) } 与える () { 戻る ( <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'> {this.state.list.map(item => { 戻る ( <p> {アイテムタイトル} </p> ) })} </div> ) } } 効果画像: 実施された効果は良くなく、上方シフト効果も見られなかったため、2番目のアイデアが浮かびました。 アイデア2 アイデア 1 に基づいて、変更を加えて、componentDidMount にタイマーを定義します。数 px ずつ上方向に移動するたびに、一定の距離に移動したら、配列の最初のデータを配列にプッシュし、最初のデータを削除し、最後に onMouEnter イベントと onMouseLeave イベントを div に追加します。 jsファイル クラスRollはReact.Componentを拡張します{ 状態 = { リスト: [ { タイトル: 'これはメッセージ 1 です' }, { タイトル: 'これはメッセージ 2 です' }, { タイトル: 'これはメッセージ 3 です' }, { タイトル: 'これはメッセージ 4 です' }, { タイトル: 'これはメッセージ 5 です' }, { タイトル: 'これはメッセージ6です' }, { タイトル: 'これはメッセージ7です' }, { タイトル: 'これはメッセージ8です' }, { タイトル: 'これはメッセージ9です' }, ]、 カウント: 0, } // ページがマウントされたらタイマーを開始するcomponentDidMount = () => { この関数を開始します } // タイマー開始 = () => { this.timer = setInterval(() => { this.Roll() }, 10); } // タイマー停止をオフにする = () => { クリア間隔(this.timer) } // オフセットが 0.5px になるたびに、状態を使用してオフセットの数を保存します Roll = () => { this.setState({ カウント: this.state.count+1 }) this.refs.roll.style.top = -0.5*this.state.count+'px'; // オフセットが 40px に達したら、配列の最初のデータを配列の末尾まで切り取り、行の高さに対応するオフセットの数を減算します。if(-0.5*this.state.count <= -40){ arr = this.state.list とします。 arr.push(この状態リスト[0]) 配列をスプライスする(0,1); this.setState({ リスト: arr, カウント: this.state.count - 50, }) this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px' } } 与える(){ 戻る ( <div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}> <div className="content" ref='roll'> {this.state.list.map((item)=>{ 戻る ( <p className='行'> <a href="#" rel="外部nofollow" > {アイテムタイトル} </a> </p> ) })} </div> </div> ) } } cssファイル 。箱{ 幅: 300ピクセル; 高さ: 160px; 境界線: 1px 黒一色; マージン: 200px 300px; 位置: 相対的; オーバーフロー: 非表示; } 。コンテンツ{ 位置: 絶対; 上: 0px; } 。行{ 高さ: 20px; マージン: 5px 自動; } 効果画像: ノードを取得 1.ドキュメントがノードを取得する js と同じように、react で document を使用して要素ノードを取得できるとは思ってもいませんでした。 2. 審判の獲得 this.refs.xxx から入手 コンポーネントDidMount = () => { コンソールにログ出力します。 } 与える () { 戻る ( <div ref='テスト'> 123 </div> ) } 3. findDOMNodeを取得 ReactDom.findDOMNode(this) から取得します。 コンポーネントDidMount = () => { console.log(ReactDom.findDOMNode(this)); } 与える () { 戻る ( <div クラス名 = 'テスト'> 123 </div> ) } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)
私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...
ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...
最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...
W3C 標準化プロセスは 7 つの異なるステップに分かれています。 W3C 標準化プロセスは 7 つ...
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...
Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...