微信小程序 - swiper 高度自适应

我这边开发用的是 wepy，代码风格跟小程序原生的不太一样，下面代码是依照小程序的代码风格整理之后的，可能有不同或遗漏的地方，但这都不重要，注意领会精神！

原理：

• 获取设备宽度
• 获取 swiper 内的图片宽高，计算宽高比
• 根据宽高比计算出图片宽度100%（屏幕宽度）时图片的高度 imgHeight
• 由于多张图片可能高度不一致，所以将所有的 imgHeight 放入一个数组，swiper 滑动时就将当前图片的 imgHeight 赋值给 swiper。

// wxml

<swiper class="swiper" indicator-dots="true" circular="true" bindchange="bindchange" style="height:{{imgsHeight[current]}}px;">
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item class="swiper_item">
      <image src="{{item.url}}" class="slide_image" data-id="{{index}}" mode="aspectFill" bindload="imageLoad" />
    </swiper-item>
  </block>
</swiper>

// js

data: {
  windowWidth: 0,
  imgUrls: [...],
  imgsHeight: [],
  current: 0,
  imgWidth: 750
}

// 每张图片加载完成会执行 imageload 方法
imageLoad: function(e) {
  // 获取图片宽高比
  const ratio = e.detail.width / e.detail.height
  // 按照宽高比计算图片宽度 100% 时的高度
  const imgHeight = this.windowWidth / ratio
  // 把每一张图片对应的高度记录到 imgsHeight 数组里
  this.imgsHeight[e.target.dataset.id] = imgHeight
},
// swiper 绑定 bindchange 函数，用来获取 current 值，传入 data
bindchange: function(e) {
  this.setData({
    current: e.detail.current
  })
}

onLoad() {
  // 获取设备屏幕宽度
  wx.getSystemInfo({
    success: (res) => {
      this.windowWidth = res.windowWidth
    }
  })
}

// wxss

.swiper image {
  width: 100%;
  height: 100%;
}

参考：https://blog.csdn.net/rolan1993/article/details/80578670