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 ジャンプテーブルについての簡単な説明

推薦する

js を使用して QR コードを生成するサンプル コード

以前、プロジェクトでQRコードをスキャンして情報を表示する機能を開発する必要がありました。インターネ...

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

MySQL における varchar 型と char 型の違い

目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...

オンデマンドで Vue コンポーネントを自動的にインポートする方法

目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...

IDEA 2020 で Tomcat サーバーを構成するための詳細な手順

IDEA 2020 で Tomcat を構成する手順は次のとおりです。最初のステップはTomcatを...

mini-vueレンダリングのシンプルな実装

目次序文ターゲット最初のステップ:ステップ2:ステップ3:ステップ4:要約する序文現在主流のフレーム...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

MySQL 5.7 でパスワードを変更する簡単な方法

これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...