ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat アプレットはどのようにして画像コンポーネント画像の適応幅比表示を実現しているのでしょうか?

WeChat アプレットはどのようにして画像コンポーネント画像の適応幅比表示を実現しているのでしょうか?

不言オリジナル: 2018-06-27 14:47:262574ブラウズ

この記事では、画像コンポーネント内の画像の適応幅比表示を実装する 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を設定します

//获取应用实例
var app = getApp()
Page({
  data: {
    screenWidth: 0,
    screenHeight:0,
    imgwidth:0,
    imgheight:0,
  },
  onLoad: function() {
    var _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  imageLoad: function(e) {
    var _this=this;
    var $width=e.detail.width,  //获取图片真实宽度
      $height=e.detail.height,
      ratio=$width/$height;  //图片的真实宽高比例
    var viewWidth=500,      //设置图片显示宽度，
      viewHeight=500/ratio;  //计算的高度值
    this.setData({
      imgwidth:viewWidth,
      imgheight:viewHeight
    })
  }
})

この記事を参考にしていただければ幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

WeChat アプレットはどのようにして画像コンポーネント画像の適応幅比表示を実現しているのでしょうか?

関連記事