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 の使用に関する詳細な説明

推薦する

iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに...

一般的なブラウザのユーザーエージェントの概要

1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...

Zabbix動的実行監視収集スクリプトの実装原理

Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...

Vueはキャンバスの手書き入力を使用して中国語を認識します

効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...

Vscode が Ubuntu にリモート接続する際のエラー問題の解決方法

1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...

vue の v-for ディレクティブはリストのレンダリングを完了します

目次1. リストの走査2. Vueにおけるキーの役割3. リストフィルタリングこの記事では、Vue ...

docker compose の使い方の詳しい説明

目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...

CSS スタッキングと Z インデックスのサンプルコード

カスケードとカスケードレベルHTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z ...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

VueはOpenLayersを使用してTiandi MapとAmapを読み込み

目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

Dockerコンテナでyumを呼び出すときのエラーの解決方法

dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

vueプロジェクトのマルチ環境設定(.env)の実装

目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...

Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例

Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...