uniapp ＜scroll-view＞组件自适应高度问题

最近在开发过程中。uniapp 的触底加载数据，不生效；官方文档说要给一个固定高度。如果固定就会产生适配问题。看网上大多数用js控制，我觉得太麻烦。能用css控制，我就不用js.;接下来就看下解决方法，主要用到弹性布局

先说布局介绍和思路： 我们一个页面。可能会有标题，分类，然后是数据滚动区scroll-view；1.整体用弹性布局display: flex;flex-flow: column;height: 100%;2.滚动区域 flex:1,scroll-view的height:100%。（发现flex：1,并不是真正的宽度或者高度） 看代码.重点看布局和样式！！

<template>
	<view class="page">
		<view>标题区域</view>
		<view>分类搜索区域</view>
		//滚动区域
		<view class="container">
			<scroll-view  style="height: 100%;" @scrolltolower="crolltolowerEvent" show-scrollbar="false" scroll-y>
			<view v-for="item in List"></view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
    
    
		onShow() {
    
    

		},
		onLoad() {
    
    
		
		},
		data() {
    
    
			return {
    
    
			List:[], //数据
			pageNo:1,
			pageSize:10,
			total:0
			}
		},
		methods: {
    
    
			//上拉加载更多事件
			crolltolowerEvent() {
    
    
				let pageNun = this.pageNo * this.pageSize
				if (pageNun < this.total) {
    
    
					this.pageNo += 1
					//	请求接口加载数据 push
				} else {
    
    
					uni.showToast({
    
    
						title: '没有更多数据了~',
						duration: 2000
					});
				}
			},
		}
	}
</script>
<style scoped>
	.page{
    
    
		display: flex;
		flex-flow: column;
		height: 100%;
	}
	.container{
    
    
		flex: 1;
		overflow-y: auto;
	}
</style>

注意scroll-view上的height:100%