uniapp はスクロールの高さを設定します-uni-app-php.cn

uniapp はスクロールの高さを設定します

王林

リリース： 2023-05-26 10:06:37

オリジナル

3783 人が閲覧しました

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 サイトの他の関連記事を参照してください。