小程序-swiper的高随里面的图片高自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序-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文章来源地址https://www.toymoban.com/news/detail-759891.html

到了这里，关于小程序-swiper的高随里面的图片高自适应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！