微信小程序Swiper轮播图图片自适应高度方法
微信小程序中的Swiper轮播图是非常常用的功能，但是官方提供的示例中，Swiper的高度是固定的150px，这样如果传入的图片大于这个高度就会被隐藏。为了解决这个问题，我们需要让图片自适应不同分辨率。
我们需要获取屏幕宽度，然后获取图片的宽高，最后等比设置当前屏幕宽度下Swiper的高度。
在页面的结构中，我们需要添加一个Swiper组件，并绑定图片加载的事件。同时，我们需要在image标签中添加mode="widthFix"属性，以便图片能够自适应宽度。
```html
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>
</swiper-item>
</block>
</swiper>
```
在page中，我们需要定义数据和图片加载事件的处理函数。
```javascript
data: {
imgUrls: [
'../img/goodsDetail/goods.png',
'../img/goodsDetail/goods.png',
'../img/goodsDetail/goods.png'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1300,
bg: '#C79C77',
Height:""
},
imgHeight:function(e){
var winWid = wx.getSystemInfoSync().windowWidth;
var imgh=e.detail.height;
var imgw=e.detail.width;
var swiperH=winWid*imgh/imgw + "px"
this.setData({
Height:swiperH
})
}
```
在imgHeight函数中，我们首先获取当前屏幕的宽度，然后获取图片的宽高，最后等比设置当前屏幕宽度下Swiper的高度。
需要注意的是，在小程序中动态设置属性只能通过setData（{ }）来设置，而不能直接操作css样式。此外，如果image外层有个容器装，然后image设置width为100%之后，距离装它的容器底部有一点距离，这是因为image是默认设置的display:inline-block属性，这个属性会产生间隙。如果要撑满容器，设置为display:block就可以了。
通过这篇文章，我们可以了解到微信小程序Swiper轮播图图片自适应高度的方法，并且学会了如何使用wx.getSystemInfoSync().windowWidth来获取当前屏幕的宽度，以及如何使用setData（{ }）来动态设置Swiper的高度。
