Comment implémenter l'affichage adaptatif des images des composants d'image dans l'applet WeChat

Cet article présente principalement la méthode de l'applet WeChat pour réaliser l'affichage du rapport de largeur adaptatif du composant d'image. Il décrit brièvement les attributs communs du composant d'image et analyse la corrélation de l'applet WeChat pour réaliser le rapport de largeur adaptatif des images. sous forme d'exemples. Pour des conseils d'utilisation, les amis qui en ont besoin peuvent se référer à

Cet article décrit l'exemple de l'applet WeChat pour implémenter l'affichage du rapport de largeur adaptatif de l'image du composant d'image. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Comprendre le composant image

En raison de l'image, il y a une largeur et une hauteur fixes par défaut, ce qui nous rend difficile l'adaptation de l'image. Résolvons-le ensemble

2. Méthode

(1) Mode d'utilisation : widthFix

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 la description du 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>

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

<.>Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Quelles sont les méthodes pour ajouter de nouveaux attributs d'objets à la séquence de détection en vue ?

Comment obtenir l'effet d'animation consistant à rebondir sur le bord dans jQuery ?

Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Comment modifier la valeur du texte de la balise P dans jQuery

Implémenter la méthode d'ajout et d'attribution de sous-éléments de balises dans jQuery

En créant des balises dans js Dynamics et en définissant des méthodes d'attribut (tutoriel détaillé)

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!