WeChat アプレットは画像コンポーネント画像の適応幅比の共有例を実装します-ミニプログラム開発-php.cn

WeChat アプレットは画像コンポーネント画像の適応幅比の共有例を実装します

小云云

リリース： 2018-01-17 16:52:53

オリジナル

3327 人が閲覧しました

この記事では、画像コンポーネント内の画像の適応幅比表示を実現するための 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
    })
  }
})

ログイン後にコピー