uniapp nvue 自适应屏幕高度双列布局

香柠汽水

于 2022-05-14 22:50:08 发布

阅读量2.4k

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_64609098/article/details/124775781

版权

这个示例展示了如何在页面中使用滚动视图组件，创建一个包含红色和黄色背景的左右两个滚动区域。左侧视图高度为1000px，右侧视图高度为3000px，整个内容区域采用flex布局进行排列。

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

<template>
	<view class="content">
		<scroll-view scroll-y="true" class="left">
			<view style="background-color: red;height: 1000px;"></view>
		</scroll-view>

		<view class="right">
			<scroll-view scroll-y="true" class="left">
				<view style="background-color: yellow;height: 3000px;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>
page {
	display: flex;
}
.content {
	border: 1px solid red;
	flex: 1;
	display: flex;
	flex-direction: row;
}

.left {
	border: 1px solid red;
	flex: 1;
}
.right {
	border: 1px solid red;
	flex: 2;
}
</style>