Comment adapter les images dans les mini programmes WeChat à la hauteur du modèle

Cette fois, je vais vous montrer comment adapter les images du mini programme WeChat à la hauteur du modèle. Quelles sont les précautions pour que les images du mini programme WeChat s'adaptent à la hauteur de. le modèle. Ce qui suit est un cas pratique. Jetons un coup d'oeil.

L'image du carrousel dans le mini programme est très simple, et il existe des exemples officiels. Cependant, le seul défaut est que le swiper a une hauteur fixe de 150px, donc si l'image entrante est plus grande que cette hauteur, il sera caché. Quoi, comment puis-je adapter les images à différentes résolutions ?

Mon idée est la suivante : obtenir la largeur de l'écran, obtenir la largeur et la hauteur de l'image, puis définir la hauteur du swiper sous la largeur actuelle de l'écran dans des proportions égales.

1. Structure

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style=&#39;height:{{Height}}&#39;>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload=&#39;imgHeight&#39;/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟
    </swiper-item>
   </block>
</swiper>

Chaque attribut de swiper est disponible dans la documentation officielle et ne sera pas expliqué ici. La chose la plus importante est : style='height:{{Height}}' //Définir dynamiquement la hauteur du swiper

2. Dans la page :

data: {
  imgUrls: [          
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png'
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 1300,
  bg: '#C79C77',
  Height:""     //这是swiper要动态设置的高度属性
 },
imgHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
  var imgh=e.detail.height;//图片高度
  var imgw=e.detail.width;//图片宽度
  var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
  this.setData({
    Height:swiperH//设置高度
  })
},

Résumé : Obtenez la largeur actuelle de l'écran : wx.getSystemInfoSync().windowWidth

Définir dynamiquement les propriétés dans le mini-programme, qui ne peuvent être définies que via setData ({ }). C'est un peu similaire à l'exploitation directe des styles CSS dans js.

Remarque : Si l'image est contenue dans un conteneur externe et que l'image est définie pour avoir une largeur de 100 %, elle sera à une petite distance du bas du conteneur dans lequel elle est contenue. C'est parce que l'image a l'attribut display:inline-block défini par défaut. Ces propriétés créent des espaces. Si vous souhaitez remplir le conteneur, définissez-le simplement sur display:block.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les paramètres jquery pour ouvrir des liens externes dans une nouvelle fenêtre

jquery+js pour obtenir l'image de contrôle du focus

Comment obtenir les paramètres Get dans l'URL

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!