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>
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐