小程序内容区域滚动按钮在最底部

1.场景描述

有些时候，我们在做列表页的时候，
上面部分的的内容区域可以滚动，
底部的按钮区域固定在最顶部；
所以按钮肯定是固定定位的哈；

<template>
	<view class="page-demo">
		<view class="srcool-box">
			<scroll-view scroll-y="true" class="cont-scrool">
				<view class="demo-height"
				    v-for="(item,index) in listTypecont" :key="index">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			确认按钮
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listTypecont:[
					{name:"司藤"},
					{name:"三生三世十里桃花"},
					{name:"宸汐缘"},
					{name:"半妖司藤"},
					{name:"百岁之约，一言为定"},
					{name:"全部"},
					{name:"司藤1"},
					{name:"三生三世十里桃花2"},
					{name:"宸汐缘3"},
					{name:"半妖司藤4"},
					{name:"百岁之约，一言为定5"},
					{name:"全部6"},
					{name:"半妖司藤7"},
					{name:"百岁之约，一言为定8"},
					{name:"全部9"},
				],
			};
		},
	}
</script>

<style>
	/*page的高度必须写  */
	page {
		width: 100%;
		height: 100%;
	}
	/* 让页面中的子元素垂直方向上排列 */
	.page-demo{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	/* scroll-view 的父级元素自动铺满整个屏幕 */
	.srcool-box{
		flex: 1;
	}
	/*让滚动中的子元素显示完整 */
	.cont-scrool{
		margin-bottom:100rpx;
	}

	.demo-height{
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		vertical-align: middle;
		background-color: red;
		border-bottom: 1px solid #ccc;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background: blue;
		text-align: center;
	}
</style>