So passen Sie Bilder in WeChat-Miniprogrammen an die Körpergröße des Models an

Dieses Mal zeige ich Ihnen, wie Sie die Bilder im WeChat-Miniprogramm an die Körpergröße des Modells anpassen. Welche Vorsichtsmaßnahmen gibt es, damit sich die Bilder im WeChat-Miniprogramm an die Körpergröße anpassen? Das Folgende ist ein praktischer Fall.

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 unterschiedliche 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 in gleichen Proportionen unter die aktuelle 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>

Die verschiedenen Attribute von Swiper sind in den offiziellen Dokumenten verfügbar und werden 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

Eigenschaften im Miniprogramm dynamisch festlegen, 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:

So verwenden Sie die JQuery-Einstellungen, um externe Links in einem neuen Fenster zu öffnen

jquery+js to Holen Sie sich das Fokuskontrollbild

So erhalten Sie die Get-Parameter in der URL

Das obige ist der detaillierte Inhalt vonSo passen Sie Bilder in WeChat-Miniprogrammen an die Körpergröße des Models an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!