微信小程序swiper中图片高度自适应处理，是在开发中很常用的一个效果。那么在小程序中我们要如何实现对图片高度的自适应处理呢？

实现原理，获取每个图片的高度，根据当前显示的图片设置swiper的高度！具体实现代码如下：

wxml代码部分：

<view class='swipter_img'>
  <swiper 
    indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}"
    interval="{{interval}}"
    duration="{{duration}}"
    indicator-dots = "true"
    style="height:{{imgheights[current]}}rpx;"
  >
    <block wx:for="{{imgUrls}}" wx:key="imgs">
      <swiper-item >
        <image src="{{item.image}}" data-id='{{index}}' mode="widthFix" class="slide-image" bindload='imageLoad' />
      </swiper-item>
    </block>
  </swiper>
</view>

js代码：

Page({
  data: {
    imgUrls: [],
    interval: 5000,
    duration: 1000,
    list_data:[],
    imgheight:200,
    //所有图片的高度  （必须）
    imgheights: [],
    //默认  （必须）
    current: 0   
  },
  //事件处理函数
  bindViewTap: function() {
   
  },
  onLoad: function () {
    
  } ,
  
  /**
   * 监听图片加载完毕
   */
  imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
      console.log(imgheight)
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    //把每一张图片的对应的高度记录到数组里  
    imgheights[e.target.dataset.id] = imgheight;
    this.setData({
      imgheights: imgheights
    })
  },
  bindchange: function (e) {
    // console.log(e.detail.current)
    this.setData({ current: e.detail.current })
  }
})

代码解析：

在image上加bindload='imageLoad'用来获取每个图片的高度然后存放imgheights数组中，swiper上设置高度，根据当前图片展示对应的高度。