编程语言
首页 > 编程语言> > 微信小程序 swiper自适应图片的高度

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

作者:互联网

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

 

标签:imgwidth,微信,750,imgheights,var,imgheight,swiper,图片
来源: https://www.cnblogs.com/bhj37/p/14783663.html