小城序swiper高度设置动态跟随图片高度

场景，一个页面里面多个轮播，且图片数据由后台控制
自己定义组件mySwiper

<!--components/mySwiper/mySwiper.wxml-->
        <swiper class="swiper" style="height: {{maxH}}px;" autoplay="{{autoplay}}" indicatorDots="{{indicatorDots}}" interval="2000" duration="500" indicator-color="#C9DCF9"	indicator-active-color="#99B7E8" circular>
          <block wx:for="{{list}}" wx:key="index">
            <swiper-item class="swiper-item">
                <image class="radiusMed" style="width: {{boxW}}px;" data-item="{{item}}"  src="{{item.url}}" mode="widthFix" bindload="bindloadHandle"></image>
            </swiper-item>
          </block>
        </swiper>

mySwiper.js

 properties: {
    pId:{
      type:String
    },
    list:{
      type:Array
    },
    autoplay:{
      type:Boolean,
      data:false
    },
    indicatorDots:{
      type:Boolean,
      data:false
    }
  },
  data: {
    boxW:100,
    maxH:50
  },
...
// 图片加载触发
 bindloadHandle({detail}) {
 	// 由于盒子外部有边距，所以计算的时候不能拿屏幕的宽，应该拿父盒子的
      const query=wx.createSelectorQuery()
      query.select('#'+this.properties.pId).boundingClientRect()
      query.exec(res=>{
        const boxW=res[0].width
         // 计算比值
        const ratio = detail.width / detail.height;
        // 得出实际高度
        const imgH=parseInt(boxW / ratio);
        if(imgH>this.data.maxH) this.data.maxH=imgH
        this.setData({
          boxW,
          maxH:this.data.maxH
        })
      })
...

调用

 <view id="topBannerSwiper">
      <mySwiper autoplay indicatorDots  list="{{sys_home_banner}}" pId="topBannerSwiper" />
    </view>