对于小程序swiper的高度固定问题解决（适用于刚接触小程序）

在最近的小程序开发中遇到一个问题，由于swiper组件的高度固定，导致轮播点溢出图片之外，我是通过查看api文档，发现微信小程序提供一个wx.createSelectorQuery()的api

首先，给image绑定一个监听图片加载完成事件

<image src="{{item.pic}}" class="img" mode="widthFix" bindload="imgLoad"></image>

然后在js文件中监听，通过类绑定

imgLoad() {
    const query = wx.createSelectorQuery()
    query.select('.img').boundingClientRect()
    query.exec( (res)=> {
      console.log(res[0]);
     
    })
  },

通过打印结果可以看到他给我们提供了很多数据，而我们需要的就是height

之后直接将数据赋值给我们在data中定义的imgHeight

imgLoad() {
    const query = wx.createSelectorQuery()
    query.select('.img').boundingClientRect()
    query.exec( (res)=> {
      console.log(res[0]);
     this.setData({
       imgHeight:res[0].height
     })
    })
  },

最后将得到的高度赋值给swiperd的行内样式，为什么说是行内样式呢？暂时我自己还没有了解到如何给css样式赋值 

<swiper style="height:{{imgHeight}}px;" indicator-dots 	indicator-active-color="#fafafa">
  <block wx:for="{{picList}}" wx:key="id">
    <swiper-item>
      <image src="{{item.pic}}" class="img" mode="widthFix" bindload="imgLoad"></image>
    </swiper-item>
  </block>
</swiper>

 这样子就能完成原生组件的高度随着img的高度变化而变化了