Uniapp は、Vue.js フレームワークに基づくクロスプラットフォーム アプリケーション開発ツールで、複数のプラットフォーム (iOS、Android、H5) 用のアプリケーションを迅速に構築できます。 Uniapp を使用して開発している場合、スクロールの高さを設定する必要があることがよくあります。そこで、この記事ではUniappでスクロールの高さを設定する方法を紹介します。
1. ページのスクロールの高さを設定します
ページを作成するときに、それを追加できます。テンプレート ページスクロールを実装するためのスクロールビュータグ。同時に、ページをスクロールできるようにスクロールビューの高さを設定する必要もあります。
たとえば、次のコードをテンプレートに追加します。
<template> <scroll-view style="height: 1000rpx;"> <!-- 页面内容 --> </scroll-view> </template>
この例では、スクロール ビューの高さを 1000rpx に設定します。
テンプレートでスクロール ビューの高さを設定することに加えて、スクロールの高さを設定することもできます。ページライフサイクルフック内 スクロールの高さは関数内で計算されます。
たとえば、ページの onLoad フック関数では、スクロールの高さを次のように計算できます:
<template> <scroll-view :style="{height: scrollHeight + 'rpx'}"> <!-- 页面内容 --> </scroll-view> </template> <script> export default { data() { return { scrollHeight: 0 }; }, onLoad() { // 获取屏幕高度 const screenHeight = uni.getSystemInfoSync().screenHeight; // 计算scroll-view的高度 const scrollHeight = screenHeight - 100; // 100为非内容区高度 // 更新scroll-view的高度 this.scrollHeight = scrollHeight; } } </script>
この例では、変数scrollHeightを使用してスクロールの高さを表します。 view 、その初期値は 0 です。ページの onLoad フック関数では、uni.getSystemInfoSync() API を通じて画面の高さを取得し、画面の高さに基づいてスクロール ビューの高さを計算しました。最後に、計算されたスクロールビューの高さをscrollHeight変数に代入し、それによってページのスクロールの高さを更新します。
2. コンポーネントのスクロールの高さを設定する
ページのスクロールの高さに加えて、コンポーネントのスクロールの高さを設定する必要がある場合があります。 Uniapp は、複数のコンポーネント間でコードを共有するためのミックスイン モードを提供します。ミックスイン パターンを使用して、コンポーネントのスクロールの高さを設定できます。
まず、Uniapp プロジェクトにミックスインを作成する必要があります。プロジェクトのルート ディレクトリの "/common/mixins/" フォルダーに新しい "scrollHeightMixin.js" ファイルを作成し、ミックスイン コードを保存します。
export default { data() { return { scrollHeight: 0 }; }, mounted() { // 获取屏幕高度 const screenHeight = uni.getSystemInfoSync().screenHeight; // 计算scroll-view的高度 const scrollHeight = screenHeight - 100; // 100为非内容区高度 // 更新scroll-view的高度 this.scrollHeight = scrollHeight; } };
この例では、scrollHeightMixin という名前のミックスインを定義します。これには、scrollHeight という名前の変数が含まれます。ミックスインの実装されたフック関数では、uni.getSystemInfoSync() API を使用して画面の高さを取得し、画面の高さに基づいてスクロールビューの高さを計算します。最後に、計算されたスクロールビューの高さをscrollHeight変数に代入して、コンポーネントのスクロールの高さを実現します。
次に、以前に定義したミックスインをコンポーネントに導入する必要があります。コンポーネントの script タグに次のコードを追加します。
<script> import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js"; export default { mixins: [ScrollHeightMixin], // 组件其他内容 }; </script>
この例では、import ステートメントを使用して、以前に定義したミックスインをコンポーネントに導入します。次に、ミックスインを mixins プロパティに追加して、コンポーネントがミックスインで定義されたscrollHeight変数を使用できるようにします。
最後に、コンポーネントのテンプレートタグでスクロールビュータグを使用し、スクロールビューの高さをミックスインで定義されたscrollHeight変数値に設定できます。
<template> <scroll-view :style="{height: scrollHeight + 'rpx'}"> <!-- 组件内容 --> </scroll-view> </template>
この例では、スクロールビューの高さをミックスインで定義されたscrollHeight変数値に設定します。
概要:
この記事では、Uniapp を使用してページ スクロールの高さとコンポーネント スクロールの高さを設定する方法を紹介します。ページのスクロールの高さについては、テンプレートでスクロールビューの高さを設定するか、ページのライフサイクルフック関数でスクロールの高さを計算できます。コンポーネントのスクロールの高さについては、ミックスイン モードを使用して実現できます。この記事が Uniapp 開発におけるスクロールの高さの設定に役立つことを願っています。
以上がuniapp はスクロールの高さを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。