【微信小程序】固定头部,只滚动内容部分功能

 <view class="main">
	 <view class="main_top">
		<m1 title="123"></m1>
	</view>
	<view class="content">
		<m2 />
	</view>	
</view>

  做了两个组件,一个是头部m1,一个是内容m2,实现功能主要是样式 

.main{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden; //关闭整个页面的滚动条
}
.main_top{
    position:fixed;z-index: 1;width:750rpx;height: 300rpx; //定位固定头部不动
    background-color: red;
}
page{
    height: 100%;
}
.content{
    height: 100%;
    margin-top: 300rpx;
    position: relative; //定位
    background-color: yellow;
    overflow-y: auto; //内容部分开启滚动条
}

  

上一篇:盘点 | 2022值得学习的编程语言 TOP 7


下一篇:图片被盒子包着,底部有空隙问题