小程序导航栏的布局细节

 

<template>
  <!-- 自定义导航栏 -->
  <Navbar />
  <scroll-view class="scroll-view" scroll-y>
    <!-- 自定义轮播图 -->
    <XtxSwiper :list="bannerList" />
    <Category :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>

正常布局，导航栏不需要设置定位，把导航栏的放在scroll-view容器外边，其他喜爱白拿的部分放在里面，给他们的父容器100%的高度并开启flex布局，然后让他们上下排列，导航栏就固定到头部了