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

學(xué)無先后,達者為師

網(wǎng)站首頁 編程語言 正文

使用Flex布局實現(xiàn)頭部固定,內(nèi)容區(qū)域滾動

作者:Zan^Z 更新時間: 2022-02-22 編程語言

頁面頭部固定布局以前用 position:fixed實現(xiàn),如今可以用flex布局實現(xiàn),快捷方便。
Flex布局好處:1.不破壞html文檔流 2.兼容性更好。
display: flex 和 display: -webkit-box 僅是各階段命名,并沒有區(qū)別。

<view>
	<view class="header"></view>
	<view class="content"></view>
</view>
page{
	display: -webkit-box;	//設(shè)置彈性布局
	-webkit-box-orient: vertical;	//設(shè)置子元素垂直布局
	height: 100%;
}
.header:{
	 height: 50px;	//設(shè)置頭部高度( 位置固定)
} 	
.content:{
 	-webkit-box-flex: 1;	//設(shè)置1等份占滿全屏
	overflow: auto	//設(shè)置溢出滾動
}

注:如若沒有反應(yīng),把外層view去掉
在這里插入圖片描述

注:使用onReachBottom時,會觸發(fā)不了底部。

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

欄目分類
最近更新