Comment faire fonctionner la hauteur adaptative des images dans le carrousel swiper

Cette fois, je vais vous montrer comment utiliser la hauteur adaptative des images dans le carrousel swiper. Quelles sont les précautions pour utiliser la hauteur adaptative des images dans le carrousel swiper. cas pratique, jetons un coup d'oeil ensemble.

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 React avec les composants antd pour mettre en œuvre un système de gestion

Résumé de la méthode de conversion d'images js en base64

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!