Das WeChat-Applet implementiert die adaptive Bildbreite

小云云
Freigeben: 2018-03-17 13:16:56
Original
7004 Leute haben es durchsucht

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>
Nach dem Login kopieren

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
		})
  	}
})
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage