Das WeChat-Applet implementiert die adaptive Bildbreite

Dieser Artikel stellt Ihnen hauptsächlich das WeChat-Applet zur Implementierung der adaptiven Bildbreite vor. Lassen Sie uns zunächst die Bildkomponente verstehen.

1. Verstehen Sie die Bildkomponente

Da das Bild standardmäßig eine feste Breite hat und Höhe, dadurch wird es für uns schwierig, das Bild anzupassen. Lass es uns gemeinsam lösen

2. Methode

(1). >

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. . Weil 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 oben im Bindload beschrieben, 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.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
		})
  	}
})

Verwandt Empfehlungen:

Eine Zusammenfassung von 10 Bildbibliotheksbeispielen

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert die adaptive Bildbreite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!