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 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

推薦する

MySQLのint主キーの自己増分の問題を解決する

導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...

Linux の traceroute コマンドの使用方法の詳細な説明

Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...

vueはEle.me UIを使用してteambitionのフィルタリング機能を模倣します

目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...

MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...

Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

Windows で mysql-8.0.18-winx64 をインストールするチュートリアル (画像とテキスト付き)

1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

Linux システムで IPv6 をサポートするように Nginx を設定する方法

1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...

js が CSS 属性 (値) のサポートを決定して通知する状況の分析

新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

MySQLのレプリケーションの詳細な分析

1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...

Nginx 500 内部サーバーエラーの解決方法

今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...

レンダリング関数と JSX の詳細

目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...