起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがあります。構成側から画像を返し、幅は変更されず (750)、高さが画像に合わせて調整されることを期待します。 私は思った// 説明を簡単にするために、css をスタイル属性としてバインドします [非推奨] && src の値をハードコードします [後でインターフェイスによって返される値に変更できます] <view style="width:100%;"> <画像 src="{{src}}"></画像> </ビュー> 最初に考えたのは、コンテンツ領域の幅を 100% に設定すると画面の幅が自動的に埋められ、高さは適応されるというものでした。 実際の効果: 画像が占めるスペースは、画面幅 x 0 解決コア: 画像の高さを取得する方法を解く 基本計画 ポイント: 画像が読み込まれた後、対応する画像情報を取得します。 アプレット開発ドキュメントを確認したところ、次のように、読み込みが成功した場合のコールバックがあることがわかりました。 デモは次のとおりです。 // wxml <view style="width:100%;"> <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image> </ビュー> //js ページ({ データ: { 画像の高さ: 0, 画像幅: 0 }, ロード成功(e){ const { 詳細: { 幅, 高さ } = e this.setData({ 画像幅: 幅、 画像の高さ:高さ }) } }) まずは効果を見てみましょう: 考えてみてください。適応させる必要がある画像が 100 枚ある場合、面倒な setData() 呼び出しが多数発生し、パフォーマンスの問題も発生するのではないでしょうか。 高度なソリューション 友人に思い出させられて、ミニプログラムの画像には、画像の切り取りと拡大縮小を設定するために使用できるモードと呼ばれるプロパティがあることを知りました。 mode属性に指定できる値は次のとおりです。 では、早速実際の効果を見てみましょう。 // 750x110 画像 <view style="width:100%;" > <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像> </ビュー> // 750x480 画像 <view style="width:100%;" > <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像> </ビュー> 750x110 のレンダリングをご覧ください: 750x480 のエフェクト画像を見てみましょう。 この時点では、src の値をインターフェースによって返される値に変更するだけで、固定幅と適応高さの要件が満たされます。 やっとこのプロパティは主に画像の適応性を実現するためのものです。言い換えれば、主に画像が歪まないようにするためのものです。 WeChatミニプログラムで画像の幅と高さを取得する方法についての記事はこれで終わりです。WeChatミニプログラムで画像の幅と高さを取得する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明
>>: nginx と Tencent Cloud の無料証明書を使用して https を作成する方法
目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...
この記事では、参考までに、カルーセル効果の具体的なコードをJavaScript+CSSを使用して実装...
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...
方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...
<br />どの家庭にもそれぞれの問題があり、改訂はどの IT 企業にとっても問題の 1...
この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...
この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...
1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...
React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...
1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...