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

所有评论(0)