flex解决微信小程序ScrollView等组件高度自适应_小程序scrollview高度自适应-CSDN博客

本文链接：https://blog.csdn.net/jiaojiaoiso/article/details/124844382

本文介绍了在小程序开发中，如何利用flex布局来动态适配scroll-view和swiper组件的高度。当数据列表高度不确定时，通过设置页面和scroll-view的父元素为flex布局，并给予scroll-view flex:1，可以实现自动填充剩余空间的效果，从而避免手动计算固定高度。同时，展示了对应的wxml、js和wxss代码示例。

摘要由CSDN通过智能技术生成

小程序页面开发时经常需要用的`scroll-view` 和 `swiper这`两个组件，官方文档显示这两个组件需要设置固定的高度才好用。

当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。

//获取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight;

再用屏幕高度screenHeight减去其他模块高度，后来是利用flex的flex:1完美解决

1.wxml

<!--1. 将页面整体设置为flex布局 page样式
height: 100%;display:flex;flex-direction: column;
-->
<page>

<swiper indicator-dots interval>
  <swiper-item wx:for='{{List}}' wx:key='index'>
    <view style="background-color: {{item}};" class="block">
    </view>
  </swiper-item>
</swiper>

<!-- 2.将scroll-view放在一个view中,flex:1 -->
<view class="scroll">
  <scroll-view class="image-group" scroll-y="true" bindscrolltolower="taskLower" style="height:100%">
    <view class="card" wx:for="{{cardList}}" wx:key='index'>
      {{item.name}}{{index}}
    </view>
  </scroll-view>
</view>

</page>

2.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    List: ['#3397FF', '#A360EE', '#02B842'],
    cardList: [{
      name: "card"
    }, {
      name: "card"
    }, {
      name: "card"
    }, {
      name: "card"
    }, {
      name: "card"
    }, {
      name: "card"
    }]
  },

  onLoad(options) {

  },
  taskLower() {
    let list = this.data.cardList
    for (let i = 0; i < 6; i++) {
      list.push({ name: "card"})
    }
    this.setData({
      cardList: list
    })
  }
})

3.wxss

page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100%;
  height: 400rpx;
}

.card {
  margin: 10rpx 30rpx;
  height: 160rpx;
  box-shadow: 8px 0px 14px 4px rgba(52, 152, 255, 0.06);
}

.scroll{
  flex: 1;
  overflow: scroll;
}

4.查看效果