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

推薦する

自動ヘルスレポートを実現するDocker+Selenium方式

この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...

H5ウェイクアップアプリの実装方法と注意点のまとめ

目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...

ウェブページ読み込み時に左右にジャンプする原因の分析と解決

最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを ...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

MySQLの基本の共通機能

目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

Linux での crontab スケジュール実行コマンドの詳細な説明

LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...

MySQLデータのバックアップ方法の選択と考え方

目次1. rsync、cpでファイルをコピーする2. xxxをoutfile構文に選択する3. 遅延...

Tomcat サービスに Java 起動コマンドを追加する方法

私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...

Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

monaco-editor-vueの公式ソースコードは次のとおりです。インデックス 'mon...

MySQL での r2dbc の使用に関する詳細な理解

導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...

JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)

目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....

React.js フレームワーク Redux 基本ケースの詳細な説明

react.js フレームワーク Redux https://github.com/reactjs/...