この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 .tsx ファイル 'react' から { Component, createRef} をインポートします。 './index.less' をインポートします インターフェース状態{ トップ: 任意 ボタンリスト: ボタン[] コンテンツリスト: コンテンツ[] ボタンインデックス: 番号 } インターフェースボタン{ id: 文字列 テキスト: 文字列 } インターフェースコンテンツ{ id: 文字列 テキスト: 文字列 高さ: 数値 上: 番号 } インターフェースProps{ } クラスStairsはComponent<Props, State>を拡張します{ 左リスト: ボタン[] 右リスト: コンテンツ[] kaiguan: ブール値 右 = createRef<HTMLDivElement>() 左 = createRef<HTMLDivElement>() 左Tex = createRef<HTMLDivElement>() // oTop: 数値 | 未定義 viewHeight: 数値 | 未定義 offHeight: 数値 | 未定義 左テキスト = createRef<HTMLDivElement>() 上: 数値 | 未定義 oTop: 数値 | 未定義 コンストラクタ(props: Props) { スーパー(小道具) この状態 = { ボタンリスト: [], コンテンツリスト: [], ボタンインデックス: 0, トップ: 0 } this.LeftList = [] this.RightList = [] this.kaiguan = true this.oTop = 0 } コンポーネントマウント() { this.BtnList(20) this.ConList(20) this.setState({ ボタンリスト: this.LeftList、 コンテンツリスト: this.RightList }) } getRandom(m: 数値, n: 数値): 数値 { parseInt(`${Math.random() * (m - n) + n}`) を返します。 } BtnList(n: 数値) { (i = 0; i < n; i++ とします) { this.LeftList.push({ id: `a${i}`, テキスト: `ボタン${i}`, }); } } ConList(n: 数値) { ConTop = 0 とします。 (i = 0; i < n; i++ とします) { RandomHeight = this.getRandom(736, 1400); とします。 this.RightList.push({ id: `b${i}`, テキスト: `タイトル${i}`, 高さ: ランダム高さ、 トップ: ConTop、 }); ConTop += ランダム高さ; } } Fnスクロール() { // コンソール.log(11) if (this.right.current) { this.oTop = this.right.current.scrollTop; if (this.kaiguan) { // コンソール.log(111) カウントを 0 にする (var i = 0; i < this.state.ContentList.length; i++) { this.oTop >= this.state.ContentList[i].top の場合 { カウント = i } this.setState({ ボタンインデックス: カウント }) } // console.log(ボタンインデックス、カウント) } } // eslint 次の行を無効にする this.oTop == this.state.ContentList[this.state.ButtonIndex].top の場合 { this.kaiguan = true; } } Fn(インデックス: 任意、ev: React.MouseEvent<HTMLDivElement>) { this.viewHeight = document.documentElement.clientHeight / 2 target = ev.target を HTMLDivElement として扱います。 this.offHeight = target.offsetTop // console.log(this.offHeight) this.offHeight > this.viewHeight の場合 { if (this.LeftTex.current) { this.LeftTex.current.scrollTo({ 上: this.offHeight - this.viewHeight - target.clientHeight / 2、 動作:「スムーズ」、 }) } // コンソールログ(this.LeftTex.current) } // console.log(this.offHeight - this.viewHeight - target.clientHeight / 2) this.kaiguan = false; // this.offHeight = ev.target.offsetTop // コンソールログ(ev.target) if (this.right.current) { this.right.current.scroll({ 先頭: this.RightList[index].top, 動作:「スムーズ」、 }); } this.setState({ ボタンインデックス: インデックス }) } ボタンインデックス(インデックス: 数値) { (インデックス >= 3)の場合{ if (this.left.current && this.Lefttext.current) { this.left.current.scrollTop = (index - 3) * this.Lefttext.current.offsetHeight; } } (インデックス<3)の場合{ if (this.left.current) { this.left.current.scrollTop = 0; } } this.setState({ ボタンインデックス: インデックス }) } 与える() { footList = this.state.ButtonList とします。 戻る ( <div> <div className="について"> <div className="スクロール"> <div className="box1" ref="box1"></div> <div className="box2" ref="box2"></div> <div className="スクロール-con" ref="スクロール-con"> <div className="left" ref={this.LeftTex}> <div className="left-con"> {footList.map((item, index) => <div onClick={this.Fn.bind(this, index)} ref={this.Lefttext} className={this.state.ButtonIndex === index ? "ac left-txt" : "left-txt"} key={item.id} > {アイテムテキスト} </div> )} </div> </div> <div className="right" ref={this.right} onScroll={this.FnScroll.bind(this)}> <div className="right-con"> <div クラス名="right-txt" ref="right-txt"> {this.state.ContentList.map((item) => <div style={{ height: item.height }} className="right-title" key={item.id}>{item.text} </div> )} </div> </div> </div> </div> </div> </div> </div> ) } } デフォルトの階段をエクスポート .less ファイル .スクロール{ 幅:100vw; 高さ:100vh; overflow-y: スクロール; .box1 { 高さ: 300px; 背景: #000; 幅: 100%; } .box2 { 高さ: 200px; 背景:トマト; 幅: 100%; } .box3 { 位置: -webkit-sticky; 位置: 固定; 上: 0; 高さ: 100px; 背景:淡い紫赤; zインデックス: 999; 幅: 100%; } .スクロールコン{ 幅:100vw; 高さ:100vh; 位置: -webkit-sticky; 位置: 固定; 上: 100px; ディスプレイ: フレックス; 。左、 。右 { 高さ:100vh; overflow-y: スクロール; } 。左 { 幅: 20vw; .left-txt { 幅: 20vw; 高さ: 100px; テキスト配置: 中央; 行の高さ: 100px; 背景: 赤; } .left-txt.ac { 背景:ライトコーラル; zインデックス: 999; } } 。右 { 幅:80vw; .right-title { 幅: 100%; 高さ: 5vh; 背景: 濃い青; 色: アクア; 行の高さ: 5vh; } } } } 最後に、定義したフォルダをルートに追加します 効果図は以下のとおりです 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Nginx Rewrite の使用シナリオと設定方法の分析
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...
この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...
1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...
ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...
今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。...
目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...
目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...
この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...
最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...
目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...
React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラス...