学无先后,达者为师

网站首页 编程语言 正文

使用Flex布局实现头部固定,内容区域滚动

作者:Zan^Z 更新时间: 2022-02-22 编程语言

页面头部固定布局以前用 position:fixed实现,如今可以用flex布局实现,快捷方便。
Flex布局好处:1.不破坏html文档流 2.兼容性更好。
display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。

<view>
	<view class="header"></view>
	<view class="content"></view>
</view>
page{
	display: -webkit-box;	//设置弹性布局
	-webkit-box-orient: vertical;	//设置子元素垂直布局
	height: 100%;
}
.header:{
	 height: 50px;	//设置头部高度( 位置固定)
} 	
.content:{
 	-webkit-box-flex: 1;	//设置1等份占满全屏
	overflow: auto	//设置溢出滚动
}

注:如若没有反应,把外层view去掉
在这里插入图片描述

注:使用onReachBottom时,会触发不了底部。

原文链接:https://blog.csdn.net/Zan_Z/article/details/107023902

栏目分类
最近更新