微信小程序swiper的自适应高度

小程序组件swiper需要指定固定高度，但在某些场景中我们需要动态设置swiper的高度以完整展示swiper中的内容，比如高度不同的图片，笔者最近项目中的日历组件(31号有时会多出一行)等等，如何使swiper组件自适应高度呢？

翻阅了一些网上的例子，一般的解决方法是通过设置style.height来解决

<swiper
  style="{{style}}"
>
  <swiper-item></swiper-item>
</swiper>

  Page({
    data: {
      style: ''
    },
    
    onReady(){
      this.setData({style: 'height: 100px'})
    }
  })

问题：状态丢失

无状态内容通过上述设置可以达到要求，但类似于日历(横向滚动)这种需要保持状态的组件，会导致状态丢失(当然可以回填数据，但很麻烦)

在既要保持状态，同时又要动态设置swiper高度的要求下，最好是通过css来解决问题，这是第一印象，这样既能保持无渲染(刷新)，然后高度又能定制

一番折腾过后，发现一般的css设置不能解决上述问题，因为不管直接设置swiper高度，或者被容器包裹，设置容器高度，都需要将高度固定，一旦固定高度就达不到要求

解决: CSS变量

在几乎不考虑兼容性(没有大量测试机)的情况下，使用css变量能够很好的解决上述要求，设置css变量不会导致结构重新渲染，属于css范畴的解决方法。

模板

<view class="box" style="{{boxStyle}}">
  <swiper class="container">
    <swiper-item></swiper-item>
  </swiper>
</view>

样式

.box{
  --box-height: 400px;
  --append-height: 0;
  width: 100vw;
  height: calc(var(--box-height) + var(--append-height))
}

.container{
  height: 100%;
  width: 100%;
}

js

Page({
  data: {
    boxStyle: ''
  },

  onReady(){
    if (...) {
      this.setData({boxStyle: '--append-height: 50px'})
    } else {
      this.setData({boxStyle: '--append-height: 0'})
    }
  }
})

上述设置，将动态设置CSS变量(由js控制好)来达到swiper自适应高度，现在我们的项目正在上线中，等待测试出bug，哈哈

欢迎关注github项目
关注下面的小程序查看最新的DEMO示例