uni-app 上下两个view暂满页面,flex布局

最新推荐文章于 2025-03-01 10:12:35 发布

HXH_csdn

最新推荐文章于 2025-03-01 10:12:35 发布

阅读量2.5k

点赞数

本文链接：https://blog.youkuaiyun.com/HXH_csdn/article/details/112285701

版权

Flex布局导航栏 scroll-view 移动端开发数据列表

关键词由优快云通过智能技术生成

本文档展示了如何使用Flex布局在移动端创建一个包含导航栏和滚动视图的页面。导航栏包含多个'全部'选项，下方的scroll-view组件用于承载大量数据列表，确保在手机设备上可以流畅滚动查看。

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

页面是需要一个nav导航和一个列表,因为列表里面有很多数据,所以要加一个scroll-view
下面代码

<view style="height: 100vh;display:flex;flex-direction: column; align-items: flex-start;">
	<view>
		<view stype="display:flex;flex-direction: row; align-items: center;">
			<view>全部<view>
			<view>全部<view>
			<view>全部<view>
		</view>
	</view>
	<view  style="flex: auto;height:100%">
		<scroll-view style="flex: auto;height:100%"  scroll-y>
			//在这里写数据列表
		</scroll-view>
	</view>
</view>

需要什么样式就要自己写了,还有就是这样的布局要在手机上看才有效