この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具体的な内容は次のとおりです。 ビュー <el-row :gutter="20"> <el-col :span="3"> <!--ナビゲーション選択イベント--> <el-menu :default-active="アクティブステップ" @select="ジャンプ"> <el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId"> <i class="el-icon-menu"></i> <span slot="title">{{item.subjectName}}</span> </el-menu-item> </el-menu> </el-col> <!--スクロール イベントをバインドするにはリッスンが必要です--> <el-col :span="21" class="scroll_cls" @scroll="onScroll"> <div v-for="(item,index) in tableObject" :key="index" style="height:500px"> <div class="title scroll-item" :id="item.name">{{item.name}}</div> <el-table :data="item.rows" :key="index"> <el-table-column label="シリアル番号" type="index" width="50"></el-table-column> <el-table-column prop="channelId" label="チャンネル/チーム ID"></el-table-column> <el-table-column prop="channelName" label="チャンネル/チーム"></el-table-column> <el-table-column prop="ruleCode" label="割り当て計画 ID"></el-table-column> <el-table-column prop="ruleName" label="割り当て計画名"></el-table-column> <el-table-column prop="ruleVersion" label="バージョン番号"></el-table-column> <el-table-column prop="階層" label="レベル"> <テンプレート スロット スコープ="スコープ"> <span>{{scope.row.hierarchy == 1 ? 'プロジェクト' : 'チャネル チーム'}}</span> </テンプレート> </el-table-column> <el-table-column label="有効期間"> <テンプレート スロット スコープ="スコープ"> <span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span> </テンプレート> </el-table-column> <el-table-column prop="creatorName" label="オペレーター"></el-table-column> <el-table-column prop="createTime" label="操作時間"></el-table-column> <el-table-column prop="orderCnt" label="関連順序"> <テンプレート スロット スコープ="スコープ"> <el-ボタン @click="orderHandleClick(scope.row.orderCnt)" タイプ="テキスト" サイズ="小" >{{scope.row.orderCnt}}</el-button> </テンプレート> </el-table-column> <el-table-column label="操作"> <テンプレート スロット スコープ="スコープ"> <el-button @click="settingHandleClick(scope.row)" type="text" size="small">割り当てプランを設定する</el-button> </テンプレート> </el-table-column> </el-table> <el-ページネーション v-if="item.total > 5" スタイル="マージントップ: 15px" サイズ="小" @size-change="handleSizeChange($event,index)" @current-change="handleCurrentChange($event,index)" :current-page="ruleForm.ageNum" :ページサイズ="[10, 30, 50, 100]" :page-size="ruleForm.pageSize" layout="total, sizes, prev, pager, next" :total="アイテムの合計" </el-pagination> ... </div> </el-col> </el-row> js //スクロールトリガーボタンのハイライトメソッド: { onScroll(e) { scrollItems を document.querySelectorAll(".scroll-item"); とします。 console.log(スクロールアイテム) コンソール.log(e) (let i = scrollItems.length - 1; i >= 0; i--) { //スクロールバーのスクロール距離が現在のスクロール項目のスクロール可能な距離より大きいかどうかを判断します。let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop; (判断)の場合{ コンソールログ(i) this.activeStep = i.toString(); 壊す; } } }, ジャンプ(インデックス) { コンソール.log(インデックス) ターゲットを document.querySelector(".scroll_cls"); scrollItems を document.querySelectorAll(".scroll-item"); とします。 // スクロールバーが下までスクロールしたかどうかを判定します。if (target.scrollHeight <= target.scrollTop + target.clientHeight) { コンソール.log(インデックス) console.log(インデックスのタイプ) this.activeStep = インデックス; } let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // アンカー要素とその offsetParent (ここでは body) の上端間の距離 (スクロールする距離) コンソール.log(合計) let distance = document.querySelector(".scroll_cls").scrollTop; // スクロールバーとスクロール領域の上部の間の距離 console.log(distance) // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // スクロールバーとスクロール領域の上端の間の距離(スクロール領域はウィンドウです) // スクロール アニメーションの実装。setTimeout 再帰を使用してスムーズなスクロールを実現し、距離を 50 の小さなセグメントに分割して、10 ミリ秒ごとに 1 回スクロールします。// 各小さなセグメントの距離を計算します。let step = total / 50; (合計>距離)の場合{ スムーズダウン(document.querySelector(".scroll_cls")); } それ以外 { newTotal = 距離 - 合計とします。 ステップ = newTotal / 50; スムーズアップ(document.querySelector(".scroll_cls")); } // パラメータ要素はスクロール領域です function SmoothDown(element) { (距離 < 合計)の場合{ 距離 += ステップ; 要素.scrollTop = 距離; タイムアウトを設定します(smoothDown.bind(this, 要素), 10); } それ以外 { 要素.scrollTop = 合計; } } // パラメータ要素はスクロール領域です function SmoothUp(element) { (距離>合計)の場合{ 距離 -= ステップ; 要素.scrollTop = 距離; タイムアウトを設定します(smoothUp.bind(this, element), 10); } それ以外 { 要素.scrollTop = 合計; } } document.querySelectorAll('.scroll-item').forEach((item, index1) => { if (インデックス === インデックス1) { アイテム.scrollIntoView({ ブロック: '開始'、 動作: 'スムーズ' }) } }) }, }, マウント() { this.$nextTick(() => { コンソール.log(1) window.addEventListener('スクロール'、this.onScroll、true) }) }, CS .スクロール_cls{ 高さ: 500px; オーバーフロー:自動; } 転載元: 元のリンクはこちら 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux exa コマンド (ls よりも優れたファイル表示エクスペリエンス)
>>: Mysql インデックスと Redis ジャンプテーブルについての簡単な説明
以前、プロジェクトでQRコードをスキャンして情報を表示する機能を開発する必要がありました。インターネ...
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...
axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...
目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...
目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...
目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...
目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...
Div 基本レイアウト <div class="main"> <...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...
IDEA 2020 で Tomcat を構成する手順は次のとおりです。最初のステップはTomcatを...
目次序文ターゲット最初のステップ:ステップ2:ステップ3:ステップ4:要約する序文現在主流のフレーム...
この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...
これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...