小程序里面设置轮播图的图片自动高度

<!-- 改版的wxml： -->

    <swiper indicator-dots="{{indicatorDots}}" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:{{Height}}">

      <block wx:for="{{imgUrls}}" wx:key="banner_id">

        <swiper-item catchtap="{{item.classify_id?'onSwiperTap':''}}">

          <image src="{{item.banner_img}}" id="{{item.classify_id}}" data-src="{{item.banner_img}}" mode="widthFix" bindload='imgHeight' ></image>

        </swiper-item>

      </block>

    </swiper>

//bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度

 

js：

data: {

　　Height: "", // 轮播图的高度

}

 

//设置图片轮显高度

  imgHeight: function (e) {

    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度

    var imgh = e.detail.height; //图片高度

    var imgw = e.detail.width; //图片宽度

    var h = 25;

    //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度

    var swiperH = (winWid * imgh / imgw) + "px";

    this.setData({

      Height: swiperH //设置高度

    })

  },

 

参考来源：https://blog.csdn.net/CAO11021/article/details/97012947