Ausführliche Erläuterung der Bildschritte zur Wischerbedienung

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte für Bilder der Wischerbedienung geben. Was sind die Vorsichtsmaßnahmen für Bilder der Wischerbedienung?

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:

Detaillierte Erläuterung der Schritte zum dynamischen Festlegen von Routing-Parametern in Vue

Detaillierte Erläuterung der Schritte der Front-End- und Back-End-Dateninteraktion von vue.js

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Bildschritte zur Wischerbedienung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!