<template>
	<view class="box">
		<view class="head">
			我是个顶部
		</view>
		<view class="scroll-Y">
		     <view v-for="item in 100">
		 	     <text>我的界面</text>
		     </view>
		</view>
	</view>

</template>

当我将“我的界面”这个模块，循环100此后，就会超出页面高度，就会产生页面滚动，连带着“我是顶部”这个模块也跟着滚动。

我想要的效果是，只有循环的部分自己滚动。

解决思路如下：要给scroll-Y设置一个固定高度，这样就会产生滚动条

问题是如何动态设置沾满屏幕的高度，我想要flex:auto，这样就很方便。

所以，在app.vue界面设置 page{ height: 100% }

具体代码如下

<template>
	<view class="box">
		<view class="head">
			我是个顶部
		</view>
		<view class="scroll-Y">
		 <view v-for="item in 100">
		 	 <text>我的界面</text>
		 </view>
		</view>
	</view>

</template>

<script setup>

</script>

<style>
.box{
	width: 100vw;
	height: 100%; 
	display: flex;
	flex-direction: column;
}
.head {
	flex: 0 0 auto;
	background-color: antiquewhite;
}
.scroll-Y {
	flex: auto;
	overflow: auto;
		background-color: green;
}
</style>