微信小程序实现轮播图根据图片大小自适应高度

上效果图

话不多说——————上代码

首先wxml

<swiper class="con_img"  style="height:{{swiperheight}}px" 	indicator-dots="true" autoplay="true" indicator-active-color="#f8e112" bindchange="changeheight">

<block wx:for="{{swiper_img}}">

<swiper-item>
  
<image src="{{item.img}}"  bindload='goheight' mode="widthFix">

</image>

</swiper-item>

</block>

</swiper>

bindload='goheight'    写goheight函数在加载图片的时候计算出图片的高度

bindchange="changeheight"  写changeheight函数在更换图片时改变swiper的高度

js部分代码

计算图片自适应高度
goheight:function (e) {
    const { height } = this.data;
    var width = wx.getSystemInfoSync().windowWidth
    //获取可使用窗口宽度
    var imgheight = e.detail.height
    //获取图片实际高度
    var imgwidth = e.detail.width
    //获取图片实际宽度
    var he = width * imgheight / imgwidth
    //计算等比swiper高度
    height.push(he)
将计算出来的高度记录在数组height数组中
    this.setData({
      swiperheight:this.data.height[0]
    })
//先执行一次更换swiper高度的代码，因为changeheight函数第一张轮播图出来时不会触发
   
  },


改变swiper高度
  changeheight:function(e){
    this.setData({
      swiperheight:this.data.height[e.detail.current]
取出height中对应的高度，赋值给swiperheight
    })
  },