微信小程序中swiper高度问题

最终效果
主要解决每一个屏幕下swiper的显示高度问题

xxml

<swiper bindchange="swipercurrent" style="height:{{Height}}" autoplay="{{true}}" class="swiper_content" indicator-active-color="#fff"  indicator-dots="{{true}}" circular="{{true}}">
    <swiper-item wx:for="{{swiperList}}"  wx:key="{{index}}" >
            <navigator >
                 <image bindload='imgHeight'  src="{{item.url}}" mode="widthFix" class="swiper_image"></image>
             </navigator>
    </swiper-item>
 </swiper>
 

js

我这里乘了一个0.88是因为我在样式里面设置了图片的宽度88%

data:{
	Height: "" 
},
imgHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;//图片宽度
    var swiperH = winWid * imgh / imgw * 0.88  + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
   
    this.setData({
      Height: swiperH//设置高度
    })
  },

wxss

.swiper_image{
    width: 88%;
    margin-left: 6%;
    border-radius: 32rpx;
}