Reactは無限ループスクロール情報を実装する

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • React Nativeアバタースクロールの例
  • プラグインなしのデジタルスクロール効果のReactの例
  • 反応ループデータの実装(リスト)

<<:  HTML 5 プレビュー

>>:  Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

推薦する

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

Node.js で簡単なクローラーケースを作成するチュートリアル

準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

dockerカスタムイメージでphp7をビルドする方法

まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...

ユーザー中心設計

最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...

W3C チュートリアル (2): W3C プログラム

W3C 標準化プロセスは 7 つの異なるステップに分かれています。 W3C 標準化プロセスは 7 つ...

小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...

ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介(写真とテキスト)

前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...