Comment définir l'image du carrousel dans l'applet WeChat à une hauteur adaptative

Cette fois, je vais vous montrer comment définir l'image du carrousel dans le mini programme WeChat à une hauteur adaptative. Quelles sont les précautions à prendre pour définir l'image du carrousel dans le mini programme WeChat à une hauteur adaptative. Voici une méthode pratique ? cas, jetons un coup d'oeil une fois.

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>

Les différents attributs du swiper sont disponibles dans les documents officiels et ne seront pas expliqués 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

Propriétés définies dynamiquement dans le mini-programme, qui ne peuvent être définies que via setData ({ }), et exploiter directement le CSS dans js Le style est un peu similaire

Remarque : Si l'image est contenue dans un conteneur externe, puis une fois que l'image est définie pour avoir une largeur de 100%, elle sera un peu distance du bas du conteneur où il est contenu, c'est parce que l'image est le paramètre d'affichage par défaut : attribut inline-block, cet attribut créera 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

Explication détaillée des cas d'utilisation du mode façade JS

Instruction try-catch JS et utilisation du type d'erreur

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!