Vue+element ui はアンカーの配置を実現します

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはアンカー配置機能を実装します
  • Vue スライディング天井とアンカー配置のサンプル コード
  • Vue はスクロールを監視してアンカーの配置を実現します (双方向) 例
  • Vue プロジェクトでのアンカー配置の代替方法
  • Vueプロジェクトにおけるアンカー配置の詳細な説明

<<:  Linux exa コマンド (ls よりも優れたファイル表示エクスペリエンス)

>>:  Mysql インデックスと Redis ジャンプテーブルについての簡単な説明

推薦する

webpackでHMRを手動で実装するいくつかの方法

目次1. はじめに2. GitHub 3. 基本構成プロジェクトディレクトリパッケージ.json c...

初心者がソースコードからMySQLのデッドロック問題を理解する

夜遅くまで何度も困難なシングルステップデバッグを行った後、ようやく理想的なブレークポイントを見つけま...

MySQLのタイムゾーンを表示および設定する方法

1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

404エラーページを作成する際に注意すべき問題の簡単な分析

ウェブサイトを最適化するときは、エラー ページの使い方を学ぶ必要があります。たとえば、ウェブサイトに...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...

OpenSSL は双方向認証のチュートリアルを実装します (サーバーとクライアントのコード付き)

1. 背景1.1 問題点最近の製品テスト レポートでは、PKI ベースの認証方法の使用が推奨されて...

MySQL のソートとページング (order by と limit) と既存の落とし穴

並べ替えクエリ (order by)電子商取引の場合: 今日完了したすべての注文を表示し、取引金額に...

JSは星を消すケースを実現する

この記事の例では、星を消すためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のと...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...