Das WeChat-Applet implementiert die Beispielfreigabe für Bildkomponenten mit adaptivem Breitenverhältnis

Dieser Artikel stellt hauptsächlich die Methode des WeChat-Applets vor, um die Anzeige des adaptiven Breitenverhältnisses der Bildkomponente zu realisieren, beschreibt kurz die allgemeinen Attribute der Bildkomponente und analysiert die zugehörigen Betriebsfähigkeiten des WeChat-Applets, um das adaptive Breitenverhältnis von zu realisieren Bilder in Form von Beispielen, Freunde in Not können sich darauf beziehen, ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt die Methode des WeChat-Applets, um eine adaptive Breitenproportionsanzeige von Bildkomponentenbildern zu realisieren. Teilen Sie es wie folgt mit allen als Referenz:

1. Verstehen Sie die Bildkomponente

Aufgrund des Bildes gibt es standardmäßig feste Breiten und Höhen, was es für uns schwierig macht, das Bild anzupassen. Lassen Sie es uns gemeinsam lösen

2. Methode

(1) Verwenden Sie den Modus: widthFix

widthFix: Die Breite bleibt unverändert und die Höhe ändert sich automatisch, sodass das Seitenverhältnis des Originalbilds unverändert bleibt.
Zuerst stellen wir den Bildmodus auf widthFix ein und fügen dann dem Bild eine feste rpx-Breite hinzu, wie zum Beispiel: 730rpx.

So können auch die Bilder angepasst werden. . Da der Rpx des Miniprogramms selbst eine adaptive Anzeigeeinheit ist

(2), verwenden Sie die Bindload-Bindungsfunktion zur dynamischen Anpassung.

Wir können eine Funktion an das Bild binden. Mit dieser Funktion können wir, wie die Bindload-Beschreibung oben, die Breite und Höhe des Originalbilds ermitteln.

Berechnen Sie dann deren Seitenverhältnis. . Legen Sie dann eine Breitengröße (rpx) fest und legen Sie schließlich die Breite und Höhe des Bildes dynamisch über den Stil fest. Der Code lautet wie folgt:

1. Seitenstruktur index.wxml schreiben:

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

2. Daten index.js festlegen

//获取应用实例
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
    })
  }
})

Verwandte Empfehlungen

Detaillierte Erläuterung des CSS-Prozentsatzes zum Erstellen eines bildadaptiven Layouts

Detailliertes Beispiel für die adaptive Verarbeitung von Javascript zur Verhinderung von Bilddehnungen

So erreichen Sie eine Anpassung der Bildgröße

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert die Beispielfreigabe für Bildkomponenten mit adaptivem Breitenverhältnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!