Explication détaillée des étapes de l'image de fonctionnement du swiper

Cette fois, je vais vous apporter une explication détaillée des étapes pour les photos d'opération de swiper. Quelles sont les précautions pour les photos d'opération de swiper ? Voici des cas réels, jetons un coup d'oeil.

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 :

Explication détaillée des étapes pour définir dynamiquement les paramètres de routage dans Vue

Explication détaillée des étapes de l'interaction des données front-end et back-end de vue.js

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!