原文: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(); } 以上处理可以动态获取这个高度,唯一的问题是这个高度是在页面打开的时候计算,所以可能存在一定的闪烁跳动。 经过测试下来基本肉眼不易感知到。