首页 > 微信 > 详细

微信小程序 swiper自适应图片的高度

时间:2021-05-19 10:27:07      阅读:34      评论:0      收藏:0      [点我收藏+]
 <view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" 
      style="height:{{imgheights[current]}}rpx;">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item wx:key="*this" style="position: absolute;width: 100%;z-index:1;">
          <image src="{{item}}" class="slide-image"  class=img  bindload="imgLoad"/>  
        </swiper-item> 
      </block>
      
    </swiper>
    
  </view> 
Page({
onShareAppMessage() {
    return {
      title: swiper,
      path: page/component/pages/swiper/swiper
    }
  },

  data: {  
    imgwidth: 750,
    imgheights: [],
    
  },
 
  imgLoad: 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.push(imgheight);
    this.setData({
      imgheights: imgheights
    }) 
  }
})

 

微信小程序 swiper自适应图片的高度

原文:https://www.cnblogs.com/bhj37/p/14783663.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!