VUE ユニアプリの基本コンポーネントの簡単な紹介

VUE ユニアプリの基本コンポーネントの簡単な紹介

1. スクロールビュー

垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する必要があります。水平スクロールを使用する場合は、 white-space: nowrap ; スタイルを追加する必要があります。

scroll-y : 垂直スクロールを許可、scroll-x: 水平スクロールを許可

@scroll : スクロール時にトリガーされますevent.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

双方向データバインディング

<テンプレート>
	<表示>
		<scroll-view class="scroll" scroll-y="true" @scroll="scroll">
			<view v-for="i in 100">{{i}}</view>
		</スクロールビュー>
	</ビュー>

</テンプレート>

<スクリプト>
	エクスポートデフォルト{
		データ() {
			戻る {
				フラグ:true
			}
		},
		メソッド: {
			スクロール(e){
				コンソールログ(e.detail);
			}
		}
	}
</スクリプト>

<スタイル>
	。スクロール{
		高さ:400rpx;
	}
</スタイル>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でのルータービューコンポーネントの使用に関する詳細な説明
  • Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
  • VUE ユニアプリカスタムコンポーネントについての簡単な説明
  • Vue開発の詳細な説明 ソートコンポーネントコード
  • Vueのコンポーネントの詳細な説明

<<:  MySQLのバッファプールの詳細な説明

>>:  XHTML 入門チュートリアル: シンプルな Web ページの作成

推薦する

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する

今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...

一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)

概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

JavaScriptとTypeScriptの関係

目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...

HTMLタグのデフォルトスタイルの配置

html、address、blockquote、body、dd、div、dl、dt、fieldset...

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...

Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法

1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

静的ページと動的ページの実行メカニズムの説明

1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...

MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.16のインストールと設定方法を記録します。具体的な内容は以下のとおり...

MySQL データベースの基礎 SQL ウィンドウ関数の例の分析チュートリアル

目次導入導入集計関数 + over()ソート関数 + over() ntile() 関数 + ove...