微信小程序中scroll-view标签高度自适应问题

微信小程序中scroll-view标签高度自适应问题

应用情景：

当父级元素中除了scroll-view标签外的高度都已经知道，想使scroll-view填充余下的空间。

解决方法：

父级使用flex布局，随便给在scroll-view设置一个高度，并使其样式中flex:1

代码样例：

wxml

<view class="parent">
  <view class="first-child"></view>
  <scroll-view class="second-child" scroll-y="true">
    <view  wx:for="{{100}}" wx:key="index">1</view>
  </scroll-view>
  <view class="third-child"></view>
</view>

wxss:

.parent{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
.first-child{
  height: 100rpx;
  width: 100%;
  background-color: red;
}
.second-child{
  flex: 1;
  height: 1rpx;
  width: 100%;
  background-color: yellow;
}
.third-child{
  height: 100rpx;
  width: 100%;
  background-color: blue;
}

::-webkit-scrollbar{
  height: 0;
  width: 0;
  color:transparent;
}