微信小程序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示例