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 ページの作成

推薦する

MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法

MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法ウェブサイト開発...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

スーパーバイザーを使用して nginx + tomcat コンテナを管理する例

必要: docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...

etcd クラスターをデプロイするための docker-compose の実装手順

目次docker-compose.ymlを書くdocker-composeを実行するビルドステータス...

ページリファクタリングスキル - コンテンツ

雑談はここまでにして、インターネット上で見つかる高性能な Yahoo ウェブサイトを構築するための数...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

jsとcssのブロッキング問題の詳細な分析

目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

proxy_pass を設定した後に Nginx が 404 を返す問題を解決する

目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...

Linux で FastDFS を使用してイメージ サーバーを構築する

目次サーバー計画1. システムコンポーネントをインストールする2. fastdfsをインストールする...