ホームページ > 記事 > WeChat アプレット > 共有アプレットのスワイパー カルーセルの高さの問題の解決策をまとめます。
ミニ プログラムのスワイパー タグの高さは 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 にカプセル化された手ぶれ補正機能を導入します。
小規模プログラム開発チュートリアル]
以上が共有アプレットのスワイパー カルーセルの高さの問題の解決策をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。