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

モバイル アプリケーション開発において、カルーセルは最も一般的なコンポーネントの 1 つであり、ユーザー インターフェイスで最も一般的な要素の 1 つです。 uniapp を使用してモバイル アプリケーションを開発する場合、スワイパー コンポーネントを使用してカルーセル チャートを実装できます。ただし、場合によっては、スワイパー コンポーネントの高さを自動的に調整できず、カルーセルの表示が不完全になる場合があります。このような状況に対し、この記事ではuniappでスワイパーコンポーネントの高さを設定することでこの問題を解決する方法を紹介します。

1. スワイパーコンポーネントの基本的な使い方

スワイパーコンポーネントの高さの設定方法を理解する前に、スワイパーコンポーネントの基本的な使い方を確認しましょう。スワイパーコンポーネントは、uniapp のカルーセルコンポーネントであり、複数の画像間の自動カルーセルと手動切り替えを実現できます。具体的な使用方法は次のとおりです。

1. スワイパー コンポーネントの導入

スワイパー コンポーネントをページ (たとえば、index.vue ファイル) に導入します。

<template>
  <view>
    <swiper>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index'
    // ...
  }
</script>

スワイパー コンポーネントのパラメーターを構成する
2. #スワイパー コンポーネントは、自動回転間隔、インジケーター ポイントを表示するかどうか、ループ再生するかどうかなど、さまざまな構成パラメーターをサポートしています。 。上記のコードでは、デフォルトの設定を使用しただけですが、設定パラメータをカスタマイズする必要がある場合は、次のようにスワイパー コンポーネントに属性を追加できます。 1枚あたり5秒、ループ再生などの機能があります。

2. スワイパー コンポーネントの高さを設定します

スワイパー コンポーネントを使用する場合、高さが設定されていない場合、その高さはデフォルトで 0 になり、カルーセル画像を表示できなくなります。表示されます。通常、フレックス レイアウトを使用して、スワイパー コンポーネントの高さを適応させることができます。例:

<swiper autoplay="{{true}}" interval="{{5000}}" loop="{{true}}">

スワイパー コンポーネントの高さを 100% に設定すると、スワイパー コンポーネントの高さを親コンテナの高さにより、カルーセル画像の通常の表示が実現されます。

ページの一部の領域で他のコンポーネントが高さを占め、スワイパー コンポーネントが完全に表示されない場合など、上記の方法では問題が解決しない場合もあります。現時点では、スワイパーの高さを計算する方法を使用して問題を解決することを検討できます。

Vue コンポーネントのライフサイクル関数において、onReady 関数はコンポーネントがレンダリングされた直後に実行される関数です。したがって、onReady 関数でスワイパー コンポーネントの高さを計算し、計算された高さをスワイパー コンポーネントの style 属性に割り当てることができます。例:

1. <template>
     <view class="container">
       <swiper class="swiper">
         ...
       </swiper>
     </view>
   </template>
   
   <style>
     .container {
       display: flex;
       justify-content: center;
       align-item: center;
       height: 100%; /* 设置容器的高度为100% */
     }
     .swiper {
       width: 100%;
       height: 100%;
     }
   </style>

   ログイン後にコピー
上記のコードでは、uniapp が提供する createSelectorQuery 関数を使用して、スワイパー コンポーネントの高さを取得します。 onReady 関数では、スワイパー コンポーネントの高さを計算し、計算された高さをスワイパー コンポーネントの style 属性に代入することで、スワイパー コンポーネントの適応的な高さを実現します。

onReady 関数の使用に加えて、Vue コンポーネントの watch 関数を使用してスワイパーの高さの変化を監視することもできます。コンポーネントを変更し、スワイパー コンポーネントのスタイルを動的に更新するときに高さを変更します。例:

2. <template>
     <view>
       <swiper :style="swiperStyle">
         ...
       </swiper>
     </view>
   </template>
   
   <script>
     export default {
       name: 'Index',
       data () {
         return {
           swiperHeight: 0
         }
       },
       computed: {
         swiperStyle () {
           return {
             height: this.swiperHeight + 'px'
           }
         }
       },
       onReady () {
         // 计算swiper组件的高度
         const query = uni.createSelectorQuery().in(this)
         query.select('.swiper').boundingClientRect(data => {
           this.swiperHeight = data.height
         }).exec()
       }
     }
   </script>

   ログイン後にコピー
上記のコードでは、swiperHeight 変数を定義して、スワイパー コンポーネントの高さを保存します。 watch 関数では、swiperHeight 変数の変更を監視し、高さの動的な更新を実現するために変更されたときに $nextTick 関数を使用してスワイパー コンポーネントのスタイルを更新します。スワイパーコンポーネントの高さを取得するには、getSwiperHeight 関数を使用します。ページがマウントされた後、コンポーネントが破棄される前に、uniapp によって提供される $on 関数と $off 関数を呼び出して、動的にサイズ変更イベントをリッスンおよび解放します。ウィンドウ サイズが変更されたときにスワイパーを更新する コンポーネントの高さの機能。

3. 概要

この記事では、uniapp でスワイパー コンポーネントの高さを設定する方法を紹介します。スワイパーコンポーネントの使用時に高さを調整できない場合は、フレックスレイアウト、onReady関数、またはwatch関数を使用して問題を解決してみてください。これらのメソッドの使用は比較的簡単で、Vue ライフサイクル関数とスタイル レイアウトに関する基本的な知識のみが必要です。この記事で紹介した方法がuniapp開発の参考になれば幸いです。

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