uni-app 布局固定头部，内容滚动_uniapp 固定头底部-优快云博客

本文链接：https://blog.youkuaiyun.com/fang156239305/article/details/108582850

本文介绍了如何在uni-app中设置布局，以实现头部固定，内容区域随滚动条上下移动的效果。通过代码示例展示了具体的实现方法。

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

1 代码

<template>
	<view class="container">
	 <!-- toubu -->
	 <view class="header">
		 <text>头部</text>
	 </view>
	 <!-- 主要内容 -->
	  <view class="body">
		  <view>
			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  
		    
	  </view>

	</view>
</template>

<script>
</script>

<style>
	page{
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}
.container {
  width: 100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;

}

.header {

  height:100rpx;
  background-color: #00C6B2;
}
.body{
	  background: red;
	  overflow-y: scroll;  
}

</style>

2 效果