巧用Swiper，轻松实现微信小程序轮播图高度自适应

在微信小程序开发中，轮播图swiper组件是一个非常常用的组件，它可以用来展示一组图片，并支持自动轮播、手势滑动切换等功能。在使用轮播图时，我们经常会遇到一个问题，就是轮播图的高度如何自适应。

因为在轮播图中，我们所要展示的图片往往不会完全与轮播图的长宽相符，而且不同机型的屏幕大小也不尽相同，因此为了能够使得图片看起来赏心悦目，我们需要对轮播图的高度进行自适应。

实现轮播图高度自适应，可以使用以下步骤：

1. 在轮播图组件的style属性中，设置height为100%
2. 在轮播图组件的子元素中，设置width为100%
3. 在轮播图组件的子元素中，使用calc函数来计算height的值

calc函数的语法为：calc(expression)，其中expression可以是任何有效的CSS表达式。在本文中，我们使用calc函数来计算轮播图的高度，公式为：calc(100vh - xxxpx)，其中xxxpx是轮播图组件的padding值。

例如，如果轮播图组件的padding值为20px，那么轮播图组件的高度计算公式为：calc(100vh - 20px)。

通过以上步骤，我们可以实现轮播图高度自适应。当屏幕尺寸变化时，轮播图的高度也会自动调整，从而使得图片能够始终在轮播图中居中显示。

下面是一个具体的示例代码：

<view class="swiper-container">
  <swiper class="swiper-wrapper" indicator-dots="true" indicator-active-color="#ffffff" indicator-color="#dddddd">
    <block wx:for="{{images}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}" class="swiper-image"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<style>
.swiper-container {
  height: 100%;
}

.swiper-wrapper {
  width: 100%;
}

.swiper-image {
  width: 100%;
  height: calc(100vh - 20px);
}
</style>

在上面的代码中，我们首先在swiper-container组件的style属性中，设置height为100%。然后，我们在swiper-wrapper组件的style属性中，设置width为100%。最后，我们在swiper-image组件的style属性中，使用calc函数来计算height的值。

通过上面的代码，我们就可以实现轮播图高度自适应。当屏幕尺寸变化时，轮播图的高度也会自动调整，从而使得图片能够始终在轮播图中居中显示。