uniapp使用scroll-view自动计算剩余高度实现滚动效果

uniapp开发小程序或者app的时候，我们总是会让需要滚动的部分自动计算高度，并且使用 scroll-view 组件的时候，也是必须要设置高度才可进行滚动的。
实现如下效果：

1、设置 page 标签的高度为 height:100%; 并且设置 display: flex;
2、使用 scroll-view 组件将需要滚动的组件/元素包裹起来
3、将 scroll-view 组件的高度设置为 flex: 1; 那么就会自动分配剩余高度。

<template>
  <!-- 自定义导航栏 -->
  <CustomNavbar />
  <scroll-view class="scroll-view" scroll-y>
    <!-- 自定义轮播图 -->
    <XtxSwiper :list="bannerList" />
    <!-- 分类面板 -->
    <CategoryPanel :list="categoryList" />
    <!-- 热门推荐 -->
    <HotPanel :list="hotList" />
    <!-- 猜你喜欢 -->
    <XtxGuess />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
  .scroll-view {
    flex: 1;
  }
}
</style>