小程序-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>

 
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 })
  },

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

以上的笔记亲测有效！！

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

这篇关于小程序-swiper的高随里面的图片高自适应的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
原文链接：https://www.cnblogs.com/liuqingxia/p/15718676.html