微信小程序轮播图高度随着图片大小变化

刚开始看到这个需求有点想翻白眼。轮播图大小一样整整齐齐不好么，非要七长八短搞得页面很乱才行么，作什么妖。但是目测我近两年都打不过产品，只好乖乖查文档搬砖。
官网的轮播组件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

实现思路：给图片设置mode='widthFix'，固定宽度，保持宽高比，高度自适应。再把swiper组件的高度设为当前显示图片的高度。

image.png

bindchange事件里，current是当前所在滑块的index，source是滑块变更原因（我们这里用不到）。

上代码：
wxml:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{swiperHeight}}rpx' bindchange="change">
  <swiper-item  wx:for="{{imgUrls}}" wx:key>
    <image src="{{item}}" class="slide-image" width="750"  mode='widthFix'/>
  </swiper-item>
</swiper>

wxss:

image{width:750rpx;height:auto;}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://www.zrwl2018.cn/egoshe-api/rcode/img/qietu/b3.png',
      'https://www.zrwl2018.cn/egoshe-api/rcode/img/qietu/b1.png',
      'https://www.zrwl2018.cn/egoshe-api/rcode/img/qietu/activityCanvasBg.png',
      'https://www.zrwl2018.cn/egoshe-api/rcode/img/qietu/b2.png'
    ],
    autoplay:true,
    duration:1000,
    interval:3000
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    var imgUrls = that.data.imgUrls;

    that.imgH(imgUrls[0])
  },
//图片滑动事件
  change: function (e) {
    console.log(e.detail);
     var that=this;
    var index = e.detail.current;
    console.log(index);
    var imgUrls = that.data.imgUrls;

    that.imgH(imgUrls[index])
  },
//获取图片的高度，把它设置成swiper的高度
  imgH: function (e) {
    var that=this
    var winWid = wx.getSystemInfoSync().windowWidth*2;         //获取当前屏幕的宽度*2
    wx.getImageInfo({//获取图片长宽等信息
      src: e,
      success: function (res) {
        console.log(res.width)
        console.log(res.height)
        var imgw=res.width;
        var imgh = res.height
        var swiperH = winWid * imgh / imgw
        that.setData({
          swiperHeight: swiperH//设置高度
        })
      }
    })
  }
})