VUEは底部吸引ボタンを実装

VUEは底部吸引ボタンを実装

この記事では、VUEの具体的なコードを共有して、下部吸引ボタンを実装する例を紹介します。具体的な内容は次のとおりです。

<テンプレート>
 <div id="テスト">
 <ul class="リストボックス">
 <li v-for="(item, key) 50 個中" :key="キー">
 {{ アイテム }}
 </li>
 </ul>
 <トランジション名="フェード">
 <p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
 吸引底ボタン</p>
 </トランジション>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'テスト',
 データ() {
 戻る {
 ヘッダー固定: false、
 }
 },
 マウント() {
 window.addEventListener('スクロール'、this.handleScroll)
 },
 破壊された() {
 window.removeEventListener('スクロール'、this.handleScroll)
 },
 メソッド: {
 ハンドルスクロール() {
 定数スクロールトップ =
 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 this.headerFixed = スクロールトップ > 50
 },
 },
}
</スクリプト>
 
<style lang="scss" スコープ="スコープ">
#テスト {
 .リストボックス{
 パディング下部: 50px;
 }
 。行く {
 背景: ピンク;
 テキスト配置: 中央;
 行の高さ: 50px;
 幅: 100%;
 }
 .isFixed{
 位置: 固定;
 下部: 0;
 }
 .フェードエンター{
 不透明度: 0;
 }
 .フェード-エンター-アクティブ {
 遷移: 不透明度 0.8 秒;
 }
 .フェードアウト{
 不透明度: 0;
 }
 .フェードアウトアクティブ{
 遷移: 不透明度 0.8 秒;
 }
}
</スタイル>

効果画像:

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

以下もご興味があるかもしれません:
  • Vueは移動可能なフローティングボタンを実装します
  • Vueカスタム命令は、タブテーブルの天井効果を実現するためのUUIDスクロール監視コードを生成します。
  • Vue スライディング天井とアンカー配置のサンプル コード
  • Vueは天井、アンカーポイント、スクロールハイライトボタンの効果を実現します
  • Vue天井アンカーコンポーネントメソッドを実装する
  • Vue のマルチルート テーブル ヘッダー天井のいくつかのレイアウト方法
  • 天井効果を実現するためのVue開発のサンプルコード
  • Vueは要素の天井または固定位置表示を実現します(スクロールイベントをリッスン)

<<:  Linux でソースインストールされたパッケージを簡単に削除する方法

>>:  MySQL での Join の使用に関する詳細な説明

推薦する

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

Vue el-date-picker 動的制限時間範囲ケースの詳細な説明

2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...

Linuxコマンドのファイル上書きとファイル追加の詳細な説明

1. コマンド > と >> の違いコマンド>: ファイルが存在する場合は、...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

CSS3 で虫眼鏡効果を模倣するいくつかの方法の原理の分析

記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...

Vue フィルターの実装と適用シナリオの詳細な説明

1. 簡単な紹介Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを...

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

Docker に MySQL と Redis をインストールする方法

この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

ベースリンクタグの使用の紹介ベース

<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...