1.准备 scroll-view
滚动容器,包裹需要滚动的区域
<!-- 自定义导航栏 -->
<CustomNavbar />
<scroll-view class="scroll-view" scroll-y>
<!-- 自定义轮播图 -->
<XtxSwiper :bannerList="bannerList" />
<!-- 首页分类 -->
<CategoryPanel :CategoryPanelList="CategoryPanelList" />
<!-- 热门推荐 -->
<HotPanel :HotPanelList="HotPanelList" />
<!-- 猜你喜欢 -->
<XtxGuess />
</scroll-view>
2.给父容器page设置高度为100%,完全撑开,开启并flex弹性盒,给滚动容器设值flex值为1
这里父容器必须要给高度,要不然顶部固定不起效
page {
background-color: #f7f7f7;
height: 100%;
display: flex;
flex-direction: column;
}
.scroll-view {
flex: 1;
}