Wie realisiert das WeChat-Applet die adaptive Anzeige des Breitenverhältnisses von Bildkomponentenbildern?

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>

Setzen 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
    })
  }
})

Das Obige ist der gesamte Inhalt dieses Artikels. Für weitere verwandte Inhalte. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Über die Funktion des WeChat JS-SDK zum Auswählen von Foto-Uploads für Mobiltelefone

Über die WeChat-Applet-Implementierung oben Einführung in Tab (Swiper)

WeChat-Applet-Entwicklung zur Realisierung des Seitenwechsels von Tabs

Das obige ist der detaillierte Inhalt vonWie realisiert das WeChat-Applet die adaptive Anzeige des Breitenverhältnisses von Bildkomponentenbildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!