ネイティブ 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はデバイス/資格情報ガードと互換性がありません

推薦する

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...

React Nativeプロジェクトフレームワークの構築経験

React Native は、2015 年 4 月に Facebook によってオープンソース化され...

HTML 画像 img にハイパーリンクを追加した後の醜い青い境界線の問題を解決する

HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

Vueはプログレスバーの変更効果を実現します

この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

CSS3で跳ねるボールのアニメーションを実現

私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさん...

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

ウェブタイポグラフィにおける致命的な意味的ミス 10 選

<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...

CentOS サーバーの時間を北京時間に変更する方法

1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...

JavaScriptの基礎を学ぶ

目次1. JavaScriptを記述する場所2. JavaScriptでよく使われる入力文と出力文1...

react+antd.3x は IP 入力ボックスを実装します

この記事では、IP入力ボックスを実装するための react+antd.3x の具体的なコードを参考ま...

Nginx セッション損失問題の解決策

nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...