uniapp实现头部、底部固定,中间滚动的布局

参考地址:https://blog.csdn.net/lll_liuhui/article/details/87923041

<template>
  <view class="scrool-page">
	<view class="header-cont">头部</view>
        <view class="list-cont">
	      <scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true">
		   <view lass="list" v-for="(item,index) in list" :key="index">
			{{item.cont}}
		   </view>
	      </scroll-view>
	 </view>

	  <view class="footer">
		<button type="primary">提交</button>
	 </view>

   </view>
</template>
<script>
export default {
	data() {
return {
list: [{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},

	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},

	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三"
	},
	{
		cont: "张三=="
	},
]
}
}
}
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
}


.scrool-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.header-cont {
	width: 100%;
	height: 110rpx;
	line-height: 100rpx;
	text-align: center;
	background: red;
}

.list-cont {
	flex: 1;
	position: relative;

	.scrool-more {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.list {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #e0e0e0;

	}
}


.footer {
	color: #fff;
	line-height: 100rpx;
	flex: 0 0 100rpx;
	/* 不放大不缩小固定100rpx */
}
</style>

posted @   何人陪我共长生  阅读(19613)  评论(1编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示