利用 flex 布局确定 scroll-view 组件的高度

前言

在使用 scroll-view 组件时，总是希望它的高度刚好为屏幕的剩余高度。如果通过获取屏幕高度的 api 来设置高度，会比较麻烦。而使用 flex 布局可以很轻松。

使用到的 css 属性

主要有如下一些 css 属性：

display: flex;
flex: 1 1 0;
height: 0;
flex: 0 0 auto;

这里有一个简单的例子，，其中关键的地方都会有注释。

<-- 模板 -->
<view class="page">
    <view class="nav">导航栏</view>
    <-- scroll-y 属性开启允许纵向滚动 -->
    <scroll-view class="scroll-view" scroll-y>
        <view v-for="item in 100" :key="item">
            {{item}}
        </view>
    </scroll-view>
</view>

<-- css -->
.page {
    height: 100%;
    <-- 开启 flex 模式 -->
    display: flex;
    flex-direction: column;
}

.nav {
    height: 50rpx;
    <-- 代表 grow, shirnk, basis。0 代表既不伸，也不缩。auto 代表基础宽度为元素默认或设置的宽度 -->
    flex: 0 0 auto;
}

.scroll-view {
    height: 0;
    <-- 1 代表占满剩余空间。 -->
    flex: 1 1 0;
}

scroll-view 组件使用 margin、padding 属性内容会正常显示吗？

可以使用 margin、padding，只要 flex 布局设置正确，内容会正常显示