<template>
<view class="container">
<!-- 顶部面板 -->
<view class="width100Percent">
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
<view>这里顶部内容占位区域，不需要则删除</view>
<view>可添加需放在页面顶部的内容，比如banner图</view>
</view>
</view>
<!-- 滚动区域 -->
<view class="mainBox">
<view class="">11111111111</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">测试测试测试测试测试测试测试测试</view>
<view class="">333333333333</view>
</view>
<!-- 底部面板 -->
<view class="bottomPanel width100Percent">
<!-- 底部面板，可添加所需要放在页面底部的内容代码 -->
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
<view>这里底部内容占位区域，不需要则删除</view>
<view>可添加需放在页面底部的内容</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
computed: {
},
mounted() {
},
methods: {
}
};
</script>
<style lang="scss">
page,
.container {
width: 100%;
height: 100%;
}
/* 容器 */
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
.mainBox {
width: 100%;
flex-grow: 1;
height: 0;
overflow: hidden;
overflow-y: scroll;
}
.bottomPanel {
// 处理ios-安卓手机底部黑线兼容
width: 100%;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
</style>