微信小程序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'})
}
})
[代码]
问题：状态丢失
直接设置样式可以动态设置高度，但这样做的不好之处在于会重新渲染结构，导致之前设置的状态丢失，比如我们在日历中选中的日期
我们的需求是，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，哈哈
欢迎关注github项目
关注下面的小程序查看最新的DEMO示例
[图片]
