この記事では、無限ループスクロールを実現するための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 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)
導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...
Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...
目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...
インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...
目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...
今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...
最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...
1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...
概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...
1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...
今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...
目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...