uniapp <scroll-view> component adaptive height problem

Recently under development. The bottom loading data of uniapp does not take effect; the official document says to give a fixed height. If it is fixed, there will be adaptation problems. Seeing that most of them are controlled by js on the Internet, I think it is too troublesome. I can control it with css, so I don’t need js.; Next, let’s look at the solution, mainly using elastic layout

Let me talk about the layout introduction and ideas first: We have a page. There may be titles, categories, and scroll-view in the data scrolling area; 1. The overall elastic layout is displayed: flex; flex-flow: column; height: 100%; 2. The scrolling area flex: 1, the height of scroll-view :100%. (Find flex: 1, not the real width or height) Look at the code. Focus on layout and style! !

<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>

Note the height: 100% on the scroll-view