小程序swiper高度自適應

WXML

<swiper indicator-dots="true" autoplay="true" interval="3000" style='height:{{bannerHeight}}px'>
        <block wx:for="{{imgUrls}}" wx:key="key">
          <swiper-item>
            <image src="{{item}}" mode="widthFix" class="slide-image" bindload='imageLoad' />
          </swiper-item>
        </block>
      </swiper>

WXSS

swiper{width: 100%;}

.slide-image {
 width: 100%;
}

JS

data:{
	imgUrls:[
      'banner3.png',
      'banner.png',
      'banner1.png',
      'banner2.png',
      'banner4.png'
    ],
}
imageLoad: function (e) {
    var res = wx.getSystemInfoSync();
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      ratio = imgwidth / imgheight;
    this.setData({
      bannerHeight: res.windowWidth / ratio -10
    })

  },