共有アプレットのスワイパー カルーセルの高さの問題の解決策をまとめます。

ミニ プログラムのスワイパー タグの高さは 150 ピクセルに固定されますが、実際にはこのカルーセルの高さを動的に変更できることを期待しており、そうでない場合は、さまざまなデバイスで高さが 150 ピクセルになり、スタイルが表示されます。 。この記事では、この身長の問題の解決策を紹介しますので、お役に立てれば幸いです。

1. 概要

アプレットは、カルーセル ラベルの高さを 150 ピクセルに固定します。大画面のデバイスではスタイルがあまり目立たなくなりますが、iPhone5 などの小さな画面のモデルに切り替えると、画像の高さは 150px に達しません。画像に設定したモードは widthFix なので、画像の高さは幅に応じて調整されます。したがって、解決する必要がある問題は、画像の高さに応じてカルーセルの高さを変更することです。

2. 解決策

1) スワイパーのインライン スタイルを設定し、高さを 1 つのダイナミックにバインドします。データを作成し、内部イメージ タグに id="swiper-image" を設定します。イメージ タグにはイベント「bindload」があります。このイベントは、イメージがロードされるときにトリガーされ、このイベントをイメージにバインドします

公式 Web サイトのドキュメント: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

注: ここでなぜドンドンonLoad ライフサイクルで画像の高さを取得できませんか? onLoad で画像情報を取得するためにいくつかのメソッドを使用すると、ローカル画像からしか正確な情報を取得できませんが、ネットワークから要求された画像は取得できないためです。 、コンポーネントがロードされるときに画像が要求されない可能性があり、特定のデータを取得できないため、画像に付属するバインドロード イベントを使用してその特定の情報を取得します

2)、index.js ファイルのデータで変数 swiperHeight を宣言し、スワイパー タグの高さを格納します

3) 次に、イメージにバインドされたバインドロード イベント ハンドラー関数 handleSwiperImageLoaded を記述し、アプレットの wx.createSelectorQuery() を使用し、ノード セレクターを作成した後、query.select('#swiper- image').boundingClientRect().exec((res) => {}) メソッドを使用して、画像の特定の情報を取得します。最後に、取得した画像のカバレッジを swiperHeight に設定します。これにより、画像が swiper タグに動的にバインドされ、ページ スタイルの表示が通常になります

#3. 最適化

1). リクエストした写真が十数枚あるため、このメソッドが呼び出されます。したがって、この問題を解決するには手ぶれ補正関数を記述するだけです。ルート ディレクトリの下の until.js ディレクトリに新しいhook.js ファイルを作成し、カプセル化された js 関数を保存します。その中に手ぶれ補正関数を記述してエクスポートします。

2)、home-music ディレクトリのindex.js にカプセル化された手ぶれ補正機能を導入します。

##3)、handleSwiperImageLoaded メソッドで手ぶれ補正機能を使用してください。このメソッドは、最後の画像を読み込んだ後にのみトリガーされます。

[関連する学習の推奨事項:

小規模プログラム開発チュートリアル]

以上が共有アプレットのスワイパー カルーセルの高さの問題の解決策をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。