评论

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

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

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

最后一次编辑于  2020-06-24  
点赞 1
收藏
评论

2 个评论

  • 吾逍遥[爱心]
    吾逍遥[爱心]
    2020-07-11

    666,我最近也看了不少swiper自适应内容高度问题

    2020-07-11
    赞同 1
    回复
  • Youngwell
    Youngwell
    2020-06-24

    开启了新世界的大门

    2020-06-24
    赞同
    回复 1
    • 天天修改
      天天修改
      2020-06-24
      一开始我也觉得好神奇,哈哈
      2020-06-24
      回复
登录 后发表内容