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