上效果图
话不多说——————上代码
首先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})},