uniappでスワイパーの高さを動的に設定する方法

Swiper は多くのユニアプリ開発プロジェクトで頻繁に使用されるコンポーネントであり、画像カルーセルや広告表示などの機能を簡単に実装できるスライディングビューコンテナを提供します。ただし、実際のプロジェクトでは、コンテンツの変更に適応するために、コンテンツの高さに基づいてスワイパーの高さを動的に設定する必要があることがよくあります。では、uniapp でスワイパーの高さを動的に設定するにはどうすればよいでしょうか?

1. Swiper の高さを計算する

実際のプロジェクトでは、別のビュー コンテナー (div など) を介して Swiper コンポーネントをインクルードし、Swiper に必要な高さを取得できます。 Swiper に含まれるすべてのコンテンツをコンテナに追加し、高さを計算します。これにより、Swiper の高さをコンテンツの変更に合わせて動的に設定できます。

サンプル コード:

<template>
  <view>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">内容1</div>
        <div class="swiper-slide">内容2</div>
        <div class="swiper-slide">内容3</div>
      </div>
    </div>
  </view>
</template>
<script>
  export default {
    onReady() {
      this.calcHeight()
    },
    methods: {
      //计算高度
      calcHeight() {
        let _this = this
        setTimeout(() => {
          uni.createSelectorQuery()
            .in(this)
            .select('.swiper-container')
            .boundingClientRect((rect) => {
              _this.swiperHeight = rect.height
            })
            .exec()
        }, 200)
      }
    },
    data() {
      return {
        swiperHeight: 0
      }
    }
  }
</script>

<style>
  .swiper-container {
    height: {{swiperHeight}}px;
  }
</style>

上記のコードでは、まずテンプレートに Swiper コンポーネントを作成し、このコンポーネントを div コンテナでラップし、次に Swiper コンテナ クラスにスワイパーを追加しました。 -スワイパーの高さを設定するためのコンテナー スタイル。次に、Swiper コンポーネントがロードされた後、uni.createSelectorQuery() 関数を使用してコンテナの高さを取得し、それをコンポーネントのデータ (つまり、swiperHeight 変数) に保存します。最後に、スタイル シートの変数を使用してスワイパーの高さを設定し、高さを動的に設定する効果を実現します。

2. カスタム命令を使用する

上記の方法に加えて、uniapp が提供するカスタム命令を使用してスワイパーの高さを動的に設定することもできます。まず、コンポーネントで v-swiper-height ディレクティブを使用し、高さを計算する必要があるコンテナー クラス名を指定します。次に、ディレクティブに更新関数を定義し、Swiper に必要な高さを計算し、el.style.height を使用して Swiper の高さを設定することで、高さを動的に設定する効果を実現します。

サンプル コード:

<template>
  <swiper class="my-swiper" v-swiper-height=".my-swiper">
    <swiper-item>内容1</swiper-item>
    <swiper-item>内容2</swiper-item>
    <swiper-item>内容3</swiper-item>
  </swiper>
</template>
<script>
  export default {
    directives: {
      //自定义指令
      swiperHeight: {
        update(el, binding) {
          uni.createSelectorQuery()
            .in(this)
            .select(binding.value)
            .boundingClientRect((rect) => {
              el.style.height = rect.height + 'px'
            })
            .exec()
        }
      }
    }
  }
</script>
<style>
  .my-swiper {
    height: auto;
  }
</style>

上記のコードでは、まずテンプレート内に Swiper コンポーネントを作成し、このコンポーネントをカスタム コンテナ クラス (my-swiper) でラップします。次に、v-swiper-height ディレクティブを使用して、高さを計算する必要があるコンテナー クラス名パラメーターを設定します。次に、ディレクティブで更新関数を定義し、swiper-height にバインドされた値が変更されると、更新関数がトリガーされます。この関数では、uni.createSelectorQuery() 関数を通じて指定されたコンテナーの高さを取得し、それを Swiper の高さに設定します。

要約すると、上記の 2 つの方法はスワイパーの高さを動的に設定でき、実際のプロジェクトのニーズに応じて、より適切な方法を選択して実装できます。

以上がuniappでスワイパーの高さを動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。