この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 jsコード 'react' から { コンポーネント } をインポートします './linkage.less' をインポートします クラス Linkage は Component を拡張します { コンストラクタ(...引数) { super(...引数) // 左側を追加します this.FnButtonList = [] //右側を追加します this.FnContentList = [] // this.ScrollBys = true に切り替える // コンストラクター内で直接実行 --> React は更新されたときにのみレンダリングされます --> componentDidMount は this.init() の取得をトリガーします } 初期化() { this.FnSetButton(20) // 右側にレンダリング this.FnSetContent(20) この状態 = { ボタンリスト: this.FnButtonList、 コンテンツリスト: this.FnContentList、 //下付きボタンリストインデックス: 0, } } コンポーネントマウント() { this.EveryHeight = this.refs['linkage-button-list'].children[0].offsetHeight } // 乱数 FnSetRandom(m, n) { parseInt(Math.random() * (m - n) + n) を返します。 } // 左側のボタンをレンダリングする FnSetButton(n) { (var i = 0; i < n; i++) の場合 { this.FnButtonList.push({ id: `ボタン${i}`, テキスト: `ボタン${i}` }) } } // 正しいコンテンツをレンダリングする FnSetContent(n) { let ContTop = 0; //最初の要素とページの上部の間の距離 let Random = this.FnSetRandom(750, 1400) (i = 0; i < n; i++ とします) { this.FnContentList.push({ 高さ: ランダム、 id: `content${i}`, テキスト: `content${i}`, トップ: ContTop、 }); ContTop += ランダム; } } Fncurrn(インデックス) { (インデックス>3)の場合{ this.refs["linkage-button"].scrollTop = (index - 3) * this.EveryHeight; } (インデックス<= 3)の場合{ this.refs["linkage-button"].scrollTop = 0; } } // クリック FnButtonTab(index) { this.ScrollBys = false this.setState({ ボタンリストインデックス: インデックス }) this.refs["linkage-content"].scrollTop = this.state.ContentList[index].top; //クリックして中央に配置 this.Fncurrn(index) } //右側と左側をスクロールする FnScroll(ev) { this.ContTop = ev.target.scrollTop if (this.ScrollBys) { n = 0とする (i = 0 とします; i < this.state.ContentList.length; i++) { もし ( this.refs["linkage-content"].scrollTop >= this.state.ContentList[i].top ){ //ボックスのスクロール距離が右側のボックス内の要素とページの上部の間の距離よりも大きい場合、n = i; } } this.setState({ ボタンリストインデックス: n }) (Math.abs(n - this.state.ButtonListIndex) === 1)の場合{ this.setState({ ボタンリストインデックス: n }) //中央までスクロールします this.Fncurrn(n) } } this.ContTop == this.state.ContentList[this.state.ButtonListIndex].top) の場合 { this.ScrollBys = true } } 与える() { 戻る ( <div className="リンク"> <div className="リンクボタン" ref="リンクボタン"> <div className="リンクボタンリスト" ref="リンクボタンリスト"> {this.state.ButtonList.map((item, index) => <div キー={アイテムID} className={this.state.ButtonListIndex == index ? 'linkage-button-item ac' : 'linkage-button-item'} onClick={this.FnButtonTab.bind(this, インデックス)} > {アイテムテキスト} </div>)} </div> </div> <div className="link-content" ref="link-content" onScroll={this.FnScroll.bind(this)}> <div className="リンクコンテンツリスト"> {this.state.ContentList.map((item) => <div className="リンクコンテンツ項目" キー={アイテムID} スタイル={{ 高さ: item.height + 'px' }} > <div className="linkage-content-title"> {item.text}</div> </div>)} </div> </div> </div> ) } } デフォルトのリンクをエクスポート cssファイル 体 { マージン: 0; } .linkage { 幅:100vw; 高さ:100vh; ディスプレイ: フレックス; .linkage-button { 幅: 20vw; 高さ:100vh; 背景:チョコレート; テキスト配置: 中央; フォントサイズ: 40px; 色: #fff; オーバーフロー: スクロール; スクロール動作: スムーズ; .linkage-button-list { 幅: 20vw; .linkage-button-item.ac { 背景: 水色; } .linkage-button-item { 幅: 20vw; 高さ: 10vh; 行の高さ: 10vh; } } } .linkage-content { 幅:80vw; 高さ:100vh; スクロール動作: スムーズ; オーバーフロー: スクロール; .linkage-content-list { .linkage-content-item { 幅:80vw; 高さ:100vh; .linkage-content-title { 高さ: 6vh; 行の高さ: 6vh; 幅:80vw; テキスト配置: 中央; 背景:シャルトリューズ; 色: #fff; フォントサイズ: 30px; } } } } } .linkage-button::-webkit-scrollbar { display: none; /* Chrome Safari */ } .linkage-content::-webkit-scrollbar { display: none; /* Chrome Safari */ } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)
>>: Dockerコンテナにnginxを簡単にデプロイするプロセスの分析
ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これ...
この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...
長い間何もしていなかった人は、努力をすると一生懸命働いていると思うようになります。 1. 問題Nav...
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...
みなさんこんにちは。今日は12連休ですが、何かお買い物はしましたか?今日は「Linux View S...
1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...
1. openssh-serverをインストールする yum インストール -y openssl o...
目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...
この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...