So bedienen Sie die adaptive Höhe von Bildern im Swiper-Karussell

Dieses Mal zeige ich Ihnen, wie Sie die adaptive Höhe der Bilder im Swiper-Karussell bedienen. Was sind die Vorkehrungen für die Bedienung der adaptiven Höhe der Bilder im Swiper-Karussell? Werfen wir einen Blick darauf.

Das Karussellbild im Miniprogramm ist sehr einfach und es gibt offizielle Beispiele. Der einzige Fehler besteht jedoch darin, dass der Swiper eine feste Höhe von 150 Pixeln hat. Wenn das eingehende Bild also größer als diese Höhe ist, es wird ausgeblendet. Was, wie kann ich Bilder an verschiedene Auflösungen anpassen?

Meine Idee ist: Ermitteln Sie die Bildschirmbreite, ermitteln Sie die Breite und Höhe des Bildes und stellen Sie dann die Höhe des Wischers proportional zur aktuellen Bildschirmbreite ein.

1. Struktur

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

Jedes Attribut von Swiper ist in den offiziellen Dokumenten verfügbar und wird hier nicht erläutert. Das Wichtigste ist: style='height:{{Height}}' // Höhe des Swipers dynamisch festlegen

2. Auf der Seite:

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//设置高度
  })
},

Zusammenfassung: Holen Sie sich die aktuelle Bildschirmbreite: wx .getSystemInfoSync().windowWidth

Dynamische Festlegung von Attributen im Miniprogramm, die nur über setData ({ }) festgelegt werden können. Es ähnelt ein wenig der direkten Bedienung von CSS-Stilen in js

Hinweis: Wenn sich in der äußeren Ebene ein Container befindet und die Breite des Bildes auf 100 % eingestellt ist, befindet es sich in einem kleinen Abstand vom Boden des Containers, in dem es platziert wird Das Bild wird standardmäßig mit dem Attribut display:inline-block festgelegt. Dieses Attribut erzeugt eine Lücke. Wenn Sie den Container füllen möchten, setzen Sie ihn einfach auf display:block.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit React with Antd-Komponenten ein Managementsystem implementiert

Zusammenfassung der Methode von Konvertieren von JS-Bildern in Base64

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die adaptive Höhe von Bildern im Swiper-Karussell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!