ミニプログラム学習における画像タグとスワイパーコンポーネントの簡単な分析

この記事では、ミニ プログラムのイメージ タグ イメージ タグとスワイパー カルーセル コンポーネントについて説明します。お役に立てば幸いです。

1. イメージタグ イメージタグ

##1 src

src は、ロードする画像のパスを指定します。

(1) 画像のデフォルトの幅と高さは 320 * 240 です。元の画像サイズは 200 * 100 です。

2 mode

mode は、画像コンテンツが画像の幅と高さにどのように適応するかを決定します。 label

(1)scaleToFill デフォルト値は維持されません。画像の幅と高さが画像要素を満たすように完全に引き伸ばされる

(2) アスペクト比を維持して、画像の長辺が確実に表示されるようにする 一般的に使用されるページ内カルーセル画像

(3) アスペクトフィルは、画像を拡大縮小するためにアスペクト比を維持します。画像の短辺が完全に表示されることだけを確認してください。

(4) widthFix を使用します。前の Web 画像の幅を指定した後、高さもそれに比例して調整されます。一般的に使用される 5 番目の下部。 。前の backgroud-position と同様

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

小さなプログラム開発チュートリアル

#]

3 Lazy-load ミニ プログラム内の画像は遅延読み込みを直接サポートしています。lazy-load

lazy-load は、ビューポートの上下 3 つの画面の高さ内に画像が表示されるかどうかを自ら判断します。画像

2. スワイパー カルーセル コンポーネント

swiper

はカルーセルをラップするコンテナであり、内部の子要素は swiper である必要があります-itemコンポーネント。 swiperサブ要素を自動的にカルーセル表示でき、インジケーター ポイントが組み込まれており、指を使って左右にスライドすることもできます。

1 スワイパーカルーセル チャートの外側コンテナ スワイパー

2 スワイパー項目 各カルーセル項目 swiper-item

3 スワイパー タグにはデフォルトのスタイルがあります( 1)幅 100%

(2)高さ 150px画像のデフォルトの幅と高さは 320

240

(3)*スワイパーの高さはコンテンツによって伸ばすことはできません

4 まず、元の画像の幅と高さを同じ比率で調べ、スワイパーの幅と高さを設定します。元の画像の幅と高さは次のとおりです。 1125 * 352 px

スワイパーの幅/スワイパーの高さ=元の画像の幅/元の画像の高さ

スワイパーの高さ=スワイパーの幅*元の画像の高さ/元の画像の幅

高さ: 10ovw * 352 /1125

##5 自動再生

##自動再生自動回転

##6 間隔

カルーセル時間を変更する間隔

7 循環

循環接続カルーセル

8 インジケーター ドット

インジケーター ドット表示インジケーター ページャー インデクサー

9 インジケーターの色

#indicator-colorインジケーターの選択されていない色#10 インジケーターアクティブカラー

indicator-active -color 選択したときのインジケーターの色です。

プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がミニプログラム学習における画像タグとスワイパーコンポーネントの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。