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

本文主要是介绍小程序-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

这篇关于小程序-swiper的高随里面的图片高自适应的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！