WeChat アプレットで画像コンポーネント画像の適応表示を実装する方法

この記事では、画像コンポーネント内の画像の適応幅比表示を実装する WeChat アプレットの方法を主に紹介し、画像コンポーネントの共通属性について簡単に説明し、画像コンポーネントの適応幅比表示を実装する WeChat アプレットの関連操作テクニックを分析します。サンプルの形式の画像、必要な友人はそれを参照できます

この記事では、画像コンポーネント画像の適応的な幅比率表示を実装する WeChat アプレットの例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

1. 画像コンポーネントを理解します

画像の幅と高さはデフォルトで固定されているため、画像の幅と高さを調整するとうまくいきません画像 完成しました。一緒に解決しましょう

2. メソッド

(1). 使用モード: widthFix

widthFix: 元の画像のアスペクト比を変更せずに、幅は変更されず、高さは自動的に変更されます。
まず、画像モードを widthFix に設定し、次に 730rpx などの固定 rpx 幅を画像に追加します。

このようにして、写真を調整することもできます。 。ミニプログラムのrpx自体が適応型の表示単位なので

(2)動的に適応させるにはbindloadバインディング関数を使います。

この関数を使用すると、上記のbindloadの説明と同様に、元の画像の幅と高さを取得できます。

次に、アスペクト比を計算します。 。次に、幅のサイズ (rpx) を設定し、最後にスタイルを通じて画像の幅と高さを動的に設定します。コードは次のとおりです:

1. ページ構造のindex.wxmlを記述します:

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2. データindex.jsを設定します

以上が皆さんの参考になれば幸いです。未来のみんなへ。

関連記事:

Vue の検出シーケンスにオブジェクトの新しい属性を追加する方法は何ですか?

jQuery で端から跳ね返るアニメーション効果を実現するにはどうすればよいですか?

vue cli webpackでsassを使用する方法（詳細なチュートリアル）

jQueryでPタグのテキスト値を変更する方法

jQueryでラベルサブ要素の追加と割り当てメソッドを実装する

JSダイナミクスでタグを作成し、属性メソッドを設定する(詳細なチュートリアル)

以上がWeChat アプレットで画像コンポーネント画像の適応表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。