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

本文主要是介绍【微信小程序】固定头部，只滚动内容部分功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 <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; //内容部分开启滚动条
}

这篇关于【微信小程序】固定头部，只滚动内容部分功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！