微信小程序 swiper高度自适应

wxml:

<swiper class="swiper-container" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="" indicator-active-color="#b1812c"
    circular="true" style="height:{{imgHeight}}rpx;">
    <block wx:for="{{goodsPicsInfo}}" wx:key="goodsPicsInfo">
      <swiper-item>
        <image src="{{item.picurl}}" bindload="bindload" mode='widthFix'  class="slide-image" />
      swiper-item>
    block>
  swiper>

js:

bindload: function (e) {
    //获取图片真实宽度
    var width = e.detail.width;
    var height = e.detail.height;
     //宽高比
     var scale= width / height;
    //计算的高度值
    var viewHeight = 750 / scale;
    this.setData({
      imgHeight: viewHeight
    })
  },

你可能感兴趣的:(微信小程序,小程序,swiper,高度自适应)