ネイティブ JS カプセル化 vue タブ切り替え効果

ネイティブ JS カプセル化 vue タブ切り替え効果

この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まずは効果画像をご覧ください

使用される技術

vue.js、css3 の最新バージョンをダウンロード

Vueコンポーネントは直接使用できる

<テンプレート>
  <div class="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
        ブックフレンズ</li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
        書籍リスト</li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  コンポーネント: {},
  データ() {
    戻る {
      ヘッダーアクティブ: 0,
    };
  },
  計算: {},
  作成された() {},
  マウント() {
    //送信を初期化します。this.$emit("change", this.headerActive);
  },
  メソッド: {
    ヘッダー変更(インデックス) {
      this.headerActive = インデックス;
      this.$emit("change", インデックス);
    },
  },
};
</スクリプト>

<style lang="less" スコープ>
.bookcircle-header {
  高さ: 42px;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  .ラッパー{
    幅: 286ピクセル;
    フォントサイズ: 14px;
    高さ: 29px;
    色: #1489fe;
    境界線: 1px 実線 #1489fe;
    境界線の半径: 14px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    位置: 相対的;
    box-sizing: border-box; // 境界のオーバーフローを解決し、ボックス内に境界を含める li {
      フレックス: 1;
      高さ: 100%;
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      zインデックス: 2;
    }
    。アクティブ {
      色: 白;
    }
    &::前に {
      コンテンツ: "";
      幅: 143ピクセル;
      高さ: 100%;
      背景色: #1489fe;
      位置: 絶対;
      上: 0px;
      左: 0px;
      境界線の半径: 13px 0px 0px 13px;
      zインデックス: 1;
      遷移: すべて 0.3 秒;
    }
    &.firend::before {
      変換: translateX(0);
      境界線の半径: 13px 0px 0px 13px;
    }
    &.booklist::before {
      変換: translateX(100%);
      境界線の半径: 0px 13px 13px 0px;
    }
  }
}
</スタイル>

実施原則:

ul、li、フレキシブル ボックスを使用します。まず、親要素の幅と高さを設定します。次に、フレキシブル ボックスを使用して子要素 li を水平方向に拡張します。子要素 li に flex: 1 を設定すると、子要素は親要素の幅を共有します。

次に、最初の li 要素を絶対配置でカバーする親要素の疑似要素を設定し、z-index 属性を使用して疑似要素と子要素間の階層的な表示関係を制御します。

次に、疑似要素に transition 属性を設定し、transform: translateX(); 属性を使用して要素を水平方向に移動します。

注記:

1. スイッチのクリック イベントは子要素にあり、アクティブ スタイルは子要素に追加されていますが、タブの切り替え効果は子要素ではなく、親要素の疑似要素を通じて実現されます。
2. 子要素のインデックスに基づいて親要素の動的クラスを設定する必要があります。これにより、親要素の疑似要素は、選択された子要素に基づいて切り替えアニメーションを実行できます。
3. このコンポーネントは、Taobao amfe-flexible および postcss 適応を使用します。使用時には適応の問題に注意してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript axiosのインストールとパッケージ化のケースの詳細な説明
  • 相同性とクロスドメイン、jsonp(関数カプセル化)、CORS原則の詳細な分析
  • Vue.jsは背景テーブルコンポーネントのカプセル化を管理します
  • JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ
  • ネイティブ js カプセル化シームレスカルーセル機能
  • jsはjQueryをカプセル化する簡単な方法とチェーン操作の詳細な説明を実装します
  • js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)
  • JavaScript はプロトタイプのカプセル化カルーセルを実装します
  • JavaScriptスローモーションアニメーション機能のカプセル化方法
  • JavaScript キャンバスカプセル化動的クロック
  • Jackson の JSON ツールクラスのカプセル化について JsonUtils の使用
  • 単一リンクリストの JavaScript カプセル化のサンプルコード
  • 一般的なフロントエンドJavaScriptメソッドのカプセル化

<<:  Ubuntu サーバーで MySQL を設定し、リモート接続を実装する方法

>>:  VMware Workstationはデバイス/資格情報ガードと互換性がありません

推薦する

CSS3は、Transformを使用して動く2D時計を作成します。

これでtransformコースは終了です。例を見てみましょう。transform transform...

Centos6.9 インストール Mysql5.7.18 ステップ記録

インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...

HTML タグ tbody の使い方と説明

tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用​​する必要があります...

W3C チュートリアル (15): W3C SMIL アクティビティ

SMIL は、Web にタイミングとメディアの同期のサポートを追加します。 SMIL は、Web に...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

MySQL 8.0.20 のインストールと設定の詳細なチュートリアル

この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

HTML テーブルタグチュートリアル (35): 列間属性 COLSPAN

複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...

Zabbix パスワードをリセットする方法 (ワンステップ)

問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

Mysql5.7 のルートパスワードを忘れた場合の対処法 (シンプルで効果的な方法)

前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...