小程序scroll-view自适应高度

最新推荐文章于 2025-05-05 09:03:45 发布

挚友阳光

最新推荐文章于 2025-05-05 09:03:45 发布

阅读量657

点赞数

分类专栏：微信小程序前端技术文章标签：小程序 css3 css

本文链接：https://blog.youkuaiyun.com/qq_41366114/article/details/124661850

版权

前端技术同时被 2 个专栏收录

52 篇文章

订阅专栏

微信小程序

27 篇文章

订阅专栏

该博客探讨了如何在不动态获取节点高度的情况下，利用CSS3和小程序特性，实现scroll-view组件的高度自适应，以达到页面局部滚动的流畅效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面存在局部滚动在不动态获取节点计算高度让他根据父级自适应

<view class="box">
	<view class="flex-box">
		<scroll-view></scroll-view>
	</view>
	<view class="flex-end"></view>
</view>

.box{
	width: 100vw;
    height: 100vh;
	display: flex;
    flex-direction: column;
    align-items: center;
}
scroll-view{
	width: 100%;
    height: 100%;
}
.flex-box{
	width: 100%;
    overflow-y: scroll;
}
.flex-end{
	width: 100%;
    flex-shrink: 0;
}