实现效果：swiper的高度每次都能以图片集中的最高图片（高宽比不超过1.6)为基准，其余图片在此高度中居中
<view class=”idx-banner” style=’height:{{mainAdvLen}}px;’>
<swiper class=”idx-swiper” style=’height:{{mainAdvLen}}px;’ >
<swiper-item class=”item” wx:for=”{{mainAdvs}}” wx:key=”id”>
<image src=”{{item.thumb_url}}” class=”slide-image {{currentIndex == index ? ‘active’: ”}}” style=’height:{{mainAdvLen}}px;’ bindload=”imageload”/>
</swiper-item>
</swiper>
<view class=”idot-wrap”><view wx:for=”{{main_adv}}” wx:key=”index” class=”idot {{currentIndex == index ? ‘active’: ”}}”></view></view>
</view>
.idx-banner .item{ display:flex}
{
data:{
mainAdvLen:160,
mainAdvIdx:0,
mainAdvRadio:0,
},
imageload:function(e){
this.data.mainAdvIdx++
//获取当前屏幕的宽度
var winWid = wx.getSystemInfoSync().windowWidth;
//图片宽度
var imgwidth = e.detail.width;
//图片高度
var imgheight = e.detail.height;
var ratio = imgheight/imgwidth
//依次比较，获取高度最高图片的ratio
if(ratio>this.data.mainAdvRadio){
this.setData({mainAdvRadio:ratio})
}
var length = this.data.mainAdvs.length
// 当图片全部加载完；此时的ratio是所有图片中最大的
if(this.data.mainAdvIdx==length){
var imgheight
//限制swiper高度，ratio最高不得超过1.6
if(this.data.mainAdvRadio<1.6){
//等比设置swiper的高度
imgheight = winWid *this.data.mainAdvRadio
//即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 --> swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
}
else{
imgheight = 1200
}
this.setData({mainAdvLen:imgheight})
}
}
}
11