小程序swiper的自适应高度

原文：https://developers.weixin.qq.com/community/develop/article/doc/00024611008208e3516a165075b813

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

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

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

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

问题：状态丢失

直接设置样式可以动态设置高度，但这样做的不好之处在于会重新渲染结构，导致之前设置的状态丢失，比如我们在日历中选中的日期

我们的需求是，1. 动态设置swiper高度，2. 不丢失之前的状态

一番折腾过后，发现这条路是个死胡同，不能解决问题。

解决: 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'})
    }
  }
})

上述设置，居然能够完美的实现项目需求，现在项目正在上线中，等待测试出bug，哈哈

还有一种方法：

wxml 中的 包一个view，view里放自己需要的布局。 通过id="swiper-item" 绑定该页面

<swiper current="1" duration="300" class='keyboard-container' style="height:{{keyboardHeight ? keyboardHeight + 'px' : 'auto'}}">
	<swiper-item>
	  <view id="swiper-item" style="padding-left:9rpx;padding-right:9rpx">
	      这里放你自己的布局
	  </view>
	</swiper-item>
</swiper>
js代码
onLoad: function (e) {
	var self = this
	var query = wx.createSelectorQuery()
	query.select('#swiper-item').boundingClientRect(function (res) {
	  self.setData({
	      keyboardHeight: res.height
	  });
	}).exec();
}

以上处理可以动态获取这个高度，唯一的问题是这个高度是在页面打开的时候计算，所以可能存在一定的闪烁跳动。
经过测试下来基本肉眼不易感知到。