L'applet WeChat implémente la largeur adaptative de l'image

小云云
Libérer: 2018-03-17 13:16:56
original
7000 Les gens l'ont consulté

Cet article partage principalement avec vous l'applet WeChat pour implémenter la largeur adaptative de l'image. J'espère qu'il pourra vous aider. Tout d'abord, comprenons le composant image.

1. Comprendre le composant image

Puisque l'image a une largeur fixe par défaut et En hauteur, cela nous rendra difficile l'adaptation de l'image. Résolvons-le ensemble


2. Méthode

(1). >

widthFix : La largeur reste inchangée et la hauteur change automatiquement, gardant le rapport hauteur/largeur de l'image d'origine inchangé. Tout d'abord, nous définissons le mode d'image sur widthFix, puis ajoutons une largeur rpx fixe à l'image, telle que : 730rpx.
De cette façon, les images peuvent également être adaptées. . Parce que le rpx du mini programme lui-même est une unité d'affichage adaptative


(2).Utilisez la fonction de liaison bindload pour vous adapter dynamiquement. Nous pouvons lier une fonction à l'image. Avec cette fonction, comme décrit dans le bindload ci-dessus, nous pouvons obtenir la largeur et la hauteur de l'image originale.
Calculez ensuite leur rapport hauteur/largeur. . Définissez ensuite une taille de largeur (rpx), et enfin définissez la largeur et la hauteur de l'image de manière dynamique via le style. Le code est le suivant :

1. Écrivez la structure de la page index.wxml :

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
Copier après la connexion
.

2.Définir les données 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
		})
  	}
})
Copier après la connexion


Connexes recommandations :

Un résumé de 10 exemples de galerie d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal