【小程序】微信小程序swiper的自适应高度

• Z时代
• 2024-01-10
• 分类：技术分享

<swiper
style="{{style}}"
>
<swiper-item></swiper-item>
</swiper>

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

<view class="box">
<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%;
}

Page({
data: {
boxStyle: ''
},
onReady(){
if (...) {
this.setData({boxStyle: '--append-height: 50px'})
} else {
this.setData({boxStyle: '--append-height: 0'})
}
}
})

小程序组件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">
<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示例

以上是 【小程序】微信小程序swiper的自适应高度 的全部内容， 来源链接： utcz.com/a/106139.html