この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux でソースインストールされたパッケージを簡単に削除する方法
>>: MySQL での Join の使用に関する詳細な説明
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...
目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...
2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...
1. コマンド > と >> の違いコマンド>: ファイルが存在する場合は、...
Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...
記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...
1. 簡単な紹介Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを...
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...
1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...
<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...