日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

使用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

欄目分類
最近更新