So implementieren Sie die adaptive Anzeige von Bildkomponentenbildern im WeChat-Applet

In diesem Artikel wird hauptsächlich die Methode des WeChat-Applets vorgestellt, um die Anzeige des adaptiven Breitenverhältnisses der Bildkomponente zu realisieren. Er beschreibt kurz die allgemeinen Attribute der Bildkomponente und analysiert die Korrelation des WeChat-Applets, um das adaptive Breitenverhältnis von Bildern zu realisieren In Form von Beispielen können Freunde, die sie benötigen, auf

zurückgreifen. Dieser Artikel beschreibt das Beispiel des WeChat-Applets zur Implementierung der adaptiven Breitenverhältnisanzeige des Bildkomponentenbilds. 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. Schreiben Sie die Seitenstruktur index.wxml:

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

2. Legen Sie die Daten 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
    })
  }
})

fest

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Welche Methoden gibt es, um der Erkennungssequenz in Vue neue Attribute von Objekten hinzuzufügen?

Wie erreicht man in jQuery den Animationseffekt des Abprallens von der Kante?

So verwenden Sie sass im Vue CLI Webpack (ausführliche Anleitung)

So ändern Sie den P-Tag-Textwert in jQuery

Implementieren Sie die Methode zum Hinzufügen und Zuweisen von Tag-Unterelementen in jQuery

Indem Sie Tags in js Dynamics erstellen und Attributmethoden festlegen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die adaptive Anzeige von Bildkomponentenbildern im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!