この記事では、アンカー配置を実現するための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 ジャンプテーブルについての簡単な説明
目次1. はじめに2. GitHub 3. 基本構成プロジェクトディレクトリパッケージ.json c...
夜遅くまで何度も困難なシングルステップデバッグを行った後、ようやく理想的なブレークポイントを見つけま...
1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...
目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...
ウェブサイトを最適化するときは、エラー ページの使い方を学ぶ必要があります。たとえば、ウェブサイトに...
1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...
目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...
ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...
コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...
1. 背景1.1 問題点最近の製品テスト レポートでは、PKI ベースの認証方法の使用が推奨されて...
並べ替えクエリ (order by)電子商取引の場合: 今日完了したすべての注文を表示し、取引金額に...
この記事の例では、星を消すためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のと...
この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...