小程式裡面設定輪播圖的圖片自動高度
阿新 • • 發佈：2021-12-06
<!--改版的wxml：-->
<swiperindicator-dots="{{indicatorDots}}"circular="true"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"style="height:{{Height}}">
<blockwx:for="{{imgUrls}}"wx:key="banner_id">
<swiper-itemcatchtap="{{item.classify_id?'onSwiperTap':''}}">
<imagesrc="{{item.banner_img}}"id="{{item.classify_id}}"data-src="{{item.banner_img}}"mode="widthFix"bindload='imgHeight'></image>
</swiper-item>
</block>
</swiper>
//bindload是繫結圖片載入的事件,記得給image加上mode=“widthFix”這個屬性哦，還有就是設定這個image 100%寬度
js：
data: {
Height:"",//輪播圖的高度
}
//設定圖片輪顯高度
imgHeight:function(e){
varwinWid=wx.getSystemInfoSync().windowWidth;//獲取當前螢幕的寬度
varimgh=e.detail.height;//圖片高度
varimgw=e.detail.width;//圖片寬度
varh=25;
//等比設定swiper的高度。即螢幕寬度/swiper高度=圖片寬度/圖片高度==》swiper高度=螢幕寬度*圖片高度/圖片寬度
varswiperH=(winWid*imgh/imgw)+"px";
this.setData({
Height:swiperH//設定高度
})
},
參考來源：https://blog.csdn.net/CAO11021/article/details/97012947