小程序-swiper的高随里面的图片高自适应

 <view class='index-bg' wx:if="{{dataInfo.img_src.length}}">
      <swiper indicator-dots="true" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}"
         duration="{{duration}}" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" bindchange="bindchange" style="height:{{imgheights[current]}}rpx;">
         <block wx:if="{{dataInfo.img_src.length>0}}" wx:for="{{dataInfo.img_src}}" wx:key='index'>
            <swiper-item bindtap="yulanImg" data-index="{{index}}">
               <view class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
                  <image src="{{item}}" class="slide-image" mode="widthFix"  data-id='{{index}}' mode="widthFix" bindload="imageLoad"/>
               </view>
            </swiper-item>
         </block>
      </swiper>
   </view>

 

.index-bg image {
  width: 100%;
  height: auto;
}

 

 data: {
    indicatorDots: false,
    circular: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
    dataInfo: {
      img_src: []
    }, //详情页数据
     //所有图片的高度  
     imgheights: [],
     //图片宽度 
     imgwidth: 750,
     //默认  
     current: 0
  },

imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
      console.log(imgwidth, 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 })
  },

 

以上的笔记亲测有效！！

非常感谢博主‘梦幻飞雪’的笔记，转载于：https://www.cnblogs.com/wangyihong/p/8610956.html